/* src/member-mfa.css */
.member-mfa-reminder {
  margin-block: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: #f1f5fb;
  color: #172c46;
  font-size: var(--text-md);
  line-height: 1.6;
}
.member-mfa-reminder p {
  margin: 0.375rem 0 0;
}
.member-mfa-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.5rem;
}
.member-mfa-actions a,
.member-mfa-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 0;
  font: inherit;
  font-weight: 600;
  color: #164bb8;
  background: transparent;
  border: 0;
  border-radius: 0.25rem;
  cursor: pointer;
}
.member-mfa-actions a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.member-mfa-actions button {
  color: #425873;
}
.member-mfa-actions :focus-visible {
  outline: 2px solid #1959d8;
  outline-offset: 3px;
}
.member-mfa-feedback {
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.member-mfa-feedback:empty {
  display: none;
}
.member-mfa-settings {
  margin-block: 1.5rem;
  padding: 0;
  border: 0;
  min-width: 0;
}
.member-mfa-settings legend {
  font-size: var(--text-lg);
  font-weight: 650;
}
.member-mfa-settings .field {
  margin-top: 1rem;
}

/* src/banker.css */
[data-site=banker] .banker-wordmark {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-size: 1.875rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}
[data-site=banker] .banker-wordmark-dot {
  color: var(--focus-on-brand);
}
[data-site=banker] .banker-footer .banker-wordmark {
  color: var(--brand);
}
[data-site=banker] .banker-footer .banker-wordmark-dot {
  color: var(--action);
}
[data-site=banker] .brand.banker-wordmark {
  font-size: 1.875rem;
  width: auto;
  flex: none;
  margin-right: 28px;
}
[data-site=banker] .banker-powered-by {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: var(--text-xs);
  text-decoration: none;
}
[data-site=banker] .banker-powered-by img {
  width: 108px;
  height: auto;
}
[data-site=banker] .banker-footer .footer-tagline {
  max-width: 40ch;
}
[data-site=banker] .banker-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding: 48px 0 64px;
}
[data-site=banker] .banker-hero h1 {
  margin: 0 0 24px;
  max-width: 15ch;
  font-size: clamp(2.125rem, 4.2vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
[data-site=banker] .banker-hero-intro {
  max-width: 42ch;
  margin: 0 0 26px;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: 1.7;
}
[data-site=banker] .banker-address-sample {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 28px;
  font-size: clamp(1.125rem, 2.1vw, 1.4375rem);
  color: var(--muted);
}
[data-site=banker] .banker-address-sample > :last-child {
  color: var(--brand);
  font-weight: 600;
  overflow-wrap: anywhere;
}
[data-site=banker] .banker-hero-actions {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 16px;
  align-items: center;
  gap: 20px;
}
[data-site=banker] .banker-hero-copy > .field-help {
  max-width: 49ch;
  line-height: 1.6;
}
[data-site=banker] .banker-hero-artifact {
  margin: 0;
  min-width: 0;
  justify-self: stretch;
}
[data-site=banker] .banker-hero-artifact figcaption {
  margin: 0 0 14px;
  text-align: right;
  color: var(--muted);
  font-size: var(--text-xs);
}
[data-site=banker] .banker-example-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 36px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-2);
}
[data-site=banker] .banker-example-watermark {
  position: absolute;
  z-index: -1;
  width: 320px;
  height: 320px;
  right: -160px;
  top: -85px;
  object-fit: contain;
  opacity: 0.055;
  pointer-events: none;
}
[data-site=banker] .banker-example-bank {
  display: block;
  max-width: 170px;
  height: 44px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 38px;
}
[data-site=banker] .banker-example-profile .banker-example-name {
  font-size: 1.5625rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 18px 0 8px;
  line-height: 1.3;
}
[data-site=banker] .banker-example-profile p {
  overflow-wrap: anywhere;
  margin: 0 0 6px;
  font-size: 0.875rem;
}
[data-site=banker] .banker-example-branch {
  color: var(--muted);
}
[data-site=banker] .banker-example-avatar {
  display: flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef6f1;
  color: #006a3a;
}
[data-site=banker] .banker-example-avatar svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
[data-site=banker] .banker-example-services {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 22px 0;
}
[data-site=banker] .banker-example-services span {
  border-radius: 4px;
  padding: 5px 8px;
  background: #f0f6f3;
  color: #28543b;
  font-size: 0.75rem;
}
[data-site=banker] .banker-example-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7em), 1fr));
  gap: 8px;
  font-size: 0.8125rem;
}
[data-site=banker] .banker-example-contact span {
  padding: 11px 8px;
  border-radius: var(--control-radius);
  background: var(--ground);
  text-align: center;
  font-size: 1em;
}
[data-site=banker] .banker-example-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
[data-site=banker] .banker-example-foot svg {
  width: 32px;
  height: 32px;
  flex: none;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.5;
}
[data-site=banker] .banker-bank-range {
  padding: 44px 0;
  border-block: 1px solid var(--line);
}
[data-site=banker] .banker-bank-range h2,
[data-site=banker] .banker-how h2,
[data-site=banker] .banker-final-action h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  line-height: 1.35;
}
[data-site=banker] .banker-bank-range p,
[data-site=banker] .banker-how p,
[data-site=banker] .banker-final-action p {
  color: var(--muted);
  line-height: 1.7;
}
[data-site=banker] .banker-bank-range p {
  max-width: 65ch;
  margin: 0;
}
[data-site=banker] .banker-bank-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
  align-items: center;
}
[data-site=banker] .banker-bank-rail a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 58px;
  padding: 8px;
  border-radius: var(--control-radius);
}
[data-site=banker] .banker-bank-rail a:hover {
  background: var(--white);
}
[data-site=banker] .banker-bank-rail img {
  width: 100%;
  max-width: 130px;
  height: 36px;
  object-fit: contain;
}
[data-site=banker] .banker-other-banks {
  margin-top: 20px;
}
[data-site=banker] :is(.banker-hero-actions .text-link, .banker-other-banks) {
  min-height: 44px;
}
[data-site=banker] .banker-footer .footer-top {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.75fr);
}
[data-site=banker] .banker-footer .footer-nav {
  grid-template-columns: minmax(0, 1fr);
}
[data-site=banker] .banker-footer .footer-nav ul {
  max-width: 34rem;
  columns: 2;
  column-gap: 48px;
}
@media (max-width: 1024px) {
  [data-site=banker] .banker-footer .footer-top {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  [data-site=banker] .banker-footer .footer-nav ul {
    columns: 1;
  }
}
[data-site=banker] .member-shell [data-banker-editor-link=appearance] {
  --shell-icon: var(--shell-icon-print);
}
[data-site=banker] .member-shell [data-banker-home-anchor] {
  --shell-icon: var(--shell-icon-guide);
}
[data-site=banker] .member-shell :is([data-banker-editor-link=library], [data-banker-admin-link]) {
  --shell-icon: var(--shell-icon-library);
}
[data-site=banker] .member-shell [data-account-route] {
  --shell-icon: var(--shell-icon-card);
}
[data-site=banker] .banker-footer nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 44px;
}
@media (pointer: fine) and (min-width: 641px) {
  [data-site=banker] .banker-footer nav a {
    min-height: 32px;
  }
}
[data-site=banker] .banker-external-host {
  color: var(--muted);
  font-size: 0.8125em;
}
@media (min-width: 1280px) {
  [data-site=banker] .shell-noscript {
    display: none;
  }
}
[data-site=banker] .banker-how {
  padding: 60px 0;
  scroll-margin-top: 28px;
}
[data-site=banker] .banker-how ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding-left: 24px;
  margin: 32px 0 0;
}
[data-site=banker] .banker-how li {
  padding-left: 4px;
}
[data-site=banker] .banker-how li::marker {
  color: var(--action);
  font-weight: 600;
}
[data-site=banker] .banker-how h3 {
  font-size: var(--text-lg);
  margin: 0 0 12px;
}
[data-site=banker] .banker-how p {
  margin: 0;
}
[data-site=banker] .banker-final-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 36px;
  margin-bottom: 20px;
  background: var(--surface-output);
  border-radius: var(--radius);
}
[data-site=banker] .banker-final-action p {
  margin: 0;
}
[data-site=banker] .banker-final-action > a {
  flex: none;
}
[data-site=banker] .banker-bank-field {
  margin-bottom: 24px;
}
[data-site=banker] .banker-bank-field .bank-picker-trigger {
  min-height: 56px;
}
.account-shared-scope {
  max-width: 78ch;
  margin: -4px 0 28px;
  line-height: 1.7;
}
@media (max-width: 1024px) {
  [data-site=banker] .banker-hero {
    gap: 32px;
  }
  [data-site=banker] .banker-example-card {
    padding: 26px;
  }
  [data-site=banker] .banker-bank-rail {
    gap: 14px;
  }
}
@media (max-width: 820px) {
  [data-site=banker] .brand.banker-wordmark {
    font-size: 1.5rem;
    margin-right: 0;
  }
  [data-site=banker] .banker-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 0 42px;
    gap: 36px;
  }
  [data-site=banker] .banker-hero h1 {
    max-width: 17ch;
    font-size: 2.25rem;
  }
  [data-site=banker] .banker-hero-intro {
    font-size: var(--text-md);
  }
  [data-site=banker] .banker-hero-artifact {
    width: 100%;
    max-width: 440px;
    justify-self: center;
  }
  [data-site=banker] .banker-hero-artifact figcaption {
    text-align: left;
  }
  [data-site=banker] .banker-bank-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  [data-site=banker] .banker-how {
    padding: 40px 0;
  }
  [data-site=banker] .banker-how ol {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  [data-site=banker] .banker-final-action {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 26px;
  }
}
@media (max-width: 380px) {
  [data-site=banker] .brand.banker-wordmark {
    margin-right: 0;
    font-size: 1.375rem;
  }
  [data-site=banker] .banker-hero h1 {
    font-size: 1.9375rem;
  }
  [data-site=banker] .banker-hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
  [data-site=banker] .banker-example-card {
    padding: 24px;
  }
  [data-site=banker] .banker-example-contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
  [data-site=banker] .banker-example-contact span {
    overflow-wrap: anywhere;
    padding-inline: 5px;
  }
}
.admin-bio-controls {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.6fr) minmax(140px, 1fr) auto;
  align-items: end;
  gap: 16px;
  margin-bottom: 24px;
}
.admin-bio-controls > .field {
  min-width: 0;
  margin: 0;
}
.admin-bio-controls > .button {
  min-height: 48px;
}
@media (max-width: 820px) {
  .admin-bio-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .admin-bio-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* src/bio-editor.css */
.bio-library {
  margin: 0 0 var(--space-8);
}
.bio-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.86fr);
  gap: var(--space-8);
  align-items: start;
}
.bio-editor {
  --flow-pad: 28px;
  min-width: 0;
  padding: var(--flow-pad) var(--flow-pad) 0;
  border-radius: var(--radius);
  background: var(--surface);
}
.bio-editor > [data-client-notice] {
  margin: 0 0 var(--flow-pad);
}
.bio-tabs.creation-flow-nav {
  margin: 0 0 var(--space-3);
}
.bio-tabs.creation-flow-nav button {
  min-width: 0;
  white-space: normal;
}
.bio-editor .field {
  margin-bottom: var(--space-5);
}
.bio-editor :is(input, select, textarea):where(:not(.preview-page *)) {
  width: 100%;
}
.bio-editor textarea:where(:not(.preview-page *)) {
  resize: vertical;
  min-height: 96px;
}
.bio-editor h2:where(:not(.preview-page *)),
.bio-preview-column > .preview-head > h2 {
  font-size: var(--text-lg);
}
.bio-additional-details {
  margin-block: var(--space-2) 0;
}
.bio-additional-details > summary {
  margin-bottom: 0;
}
.bio-additional-details[open] > summary {
  margin-bottom: var(--space-5);
}
@container preview-intro (width >= 19em) {
  .bio-editor .preview-intro:not(.is-short) > .preview-caption {
    --cap-lines: 2;
  }
}
.bio-editor .preview-intro-side {
  min-width: 0;
}
.bio-editor .preview-intro-open {
  white-space: normal;
  text-align: center;
  overflow-wrap: break-word;
}
.bio-preview-column {
  min-width: 0;
}
.bio-preview-column .preview-page .bio-card a,
.preview-sheet .preview-page .bio-card a {
  pointer-events: none;
}
.bio-preview-views {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  justify-self: end;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--surface-muted);
  border-radius: var(--control-radius);
}
.bio-preview-views button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--control-height);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}
.bio-preview-views button:not([aria-pressed=true]):hover {
  color: var(--ink);
  background: var(--selection);
}
.bio-preview-views button[aria-pressed=true] {
  background: var(--brand);
  color: var(--white);
}
@media (forced-colors: active) {
  .bio-preview-views button[aria-pressed=true] {
    outline: 2px solid Highlight;
  }
}
.bio-preview-views svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bio-preview-views button:focus-visible {
  outline-offset: -2px;
}
.bio-preview-column .preview-stage > :is(.preview-screen, .bio-print-view) {
  grid-area: 1 / 1;
}
.bio-print-view {
  display: none;
  align-self: center;
  justify-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 482px;
  margin: 0;
}
.preview-stage > .bio-print-view {
  max-width: min(482px, calc((var(--bio-print-stage-h, 100vh) - var(--space-3) - 1.5rem) * 85 / 55));
}
.bio-print-card {
  width: 100%;
}
.bio-print-card > svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
}
.bio-print-card > .action-hint {
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}
.bio-print-view figcaption {
  color: var(--muted);
  font-size: var(--text-xs);
  text-align: center;
}
.live-preview[data-bio-view=card] .preview-screen {
  visibility: hidden;
}
.live-preview[data-bio-view=card] .bio-print-view {
  display: grid;
}
.bio-print-card svg,
.bio-export-qr svg {
  pointer-events: none;
  -webkit-touch-callout: none;
  user-select: none;
}
:is(.bio-print-card, .bio-export-qr, .share-panel-qr-image) :is(svg, svg *) {
  stroke: none;
}
.bio-export {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.bio-export-qr {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
}
.bio-export-qr > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.bio-export-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: calc(2.8em + 2px + var(--space-2) + var(--control-height));
  font-size: var(--text-md);
}
.bio-export-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
}
.bio-export-hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}
.bio-export-hint[hidden],
.bio-export-title[hidden] {
  display: none;
}
.bio-export-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.bio-export-choice[hidden] {
  display: none;
}
.bio-export-choice select {
  flex: 1 1 auto;
  min-width: 0;
}
.bio-qr-about {
  flex: none;
  color: var(--muted);
}
.bio-qr-about svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.bio-qr-about[aria-expanded=true] {
  color: var(--ink);
  background: var(--surface-muted);
}
.bio-qr-help {
  position: absolute;
  inset: auto 0 calc(100% + 6px);
  z-index: var(--z-overlay);
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--white);
  font-size: var(--text-xs);
  line-height: 1.5;
  box-shadow: var(--shadow-2);
}
.bio-qr-help[hidden] {
  display: none;
}
.bio-export-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.preview-sheet .bio-export-actions {
  flex-wrap: wrap;
}
.bio-export-actions[hidden] {
  display: none;
}
.bio-export-actions .button {
  padding-inline: 14px;
  white-space: nowrap;
}
.bio-export-more > summary.button::after {
  content: none;
}
.bio-export-more > summary.button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform var(--motion-base) var(--ease-out);
}
.bio-export-more[open] > summary.button svg {
  transform: rotate(180deg);
}
.bio-export-qr > .qr-skeleton {
  width: 100%;
}
.bio-export.is-compact {
  grid-template-columns: 52px minmax(0, 1fr);
  margin-top: var(--space-2);
}
.bio-export.is-compact .bio-export-qr {
  width: 52px;
  height: 52px;
}
.bio-export.is-compact .bio-export-body {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  min-height: calc(2.8em + 2px);
}
.bio-export.is-compact .bio-export-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bio-export.is-compact:not([data-state=ready]) .bio-export-hint {
  display: none;
}
.bio-export.is-compact .bio-export-choice {
  flex: 1 1 auto;
}
.bio-export.is-compact .bio-export-actions {
  flex: none;
}
.bio-export.is-compact .bio-export-hint {
  flex-basis: 100%;
  order: 1;
}
.bio-export.is-tight .bio-export-choice {
  flex: 1 1 0;
}
.bio-preview-column.is-large-text {
  min-height: calc(100vh - 2 * var(--space-6));
}
.bio-category-tabs {
  --chip-bleed: var(--flow-pad);
  margin: 0 0 var(--space-5);
}
#bio-panel-appearance {
  container: bio-design / inline-size;
}
.bio-template-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}
@container bio-design (min-width: 30rem) {
  .bio-template-gallery[data-category=general] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.bio-template-choice {
  gap: var(--space-2);
}
.bio-template-note {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}
.bio-template-mini {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.bio-template-mini.is-render {
  --bio-thumb-inset: var(--space-2);
  --bio-thumb-top: var(--space-4);
  aspect-ratio: 3 / 4;
  background: var(--ground);
  contain: strict;
}
.bio-template-gallery[data-category=organization] .bio-template-mini.is-render {
  aspect-ratio: 5 / 7;
}
.bio-template-gallery[data-category=organization] .bio-template-mini.is-render::after {
  content: none;
}
.bio-template-mini.is-render::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 14%;
  background:
    linear-gradient(
      to bottom,
      transparent,
      var(--ground) 85%);
  pointer-events: none;
}
.bio-template-render {
  position: absolute;
  top: var(--bio-thumb-top);
  left: var(--bio-thumb-inset);
  width: 358px;
  container: public-frame / inline-size;
  transform: scale(var(--bio-thumb-k, 0.4));
  transform-origin: 0 0;
  pointer-events: none;
  user-select: none;
}
.bio-template-mini[data-drawn] > .bio-template-render {
  animation: preview-fade-in var(--motion-fast) var(--ease-out);
}
.bio-template-card {
  display: block;
  container: bio-card-frame / inline-size;
}
.bio-template-card .bio-avatar {
  container-type: inline-size;
}
.bio-template-card .bio-avatar span {
  font-size: min(1.5rem, 40cqw);
  line-height: 1;
}
.bio-template-choice .bio-template-render svg {
  width: 20px;
  height: 20px;
  border-radius: 0;
}
.bio-template-choice .bio-template-render img {
  border-radius: 0;
}
.bio-template-gallery[data-category=bank] {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
.bio-template-choice.bio-bank-choice {
  display: grid;
  grid-template-columns: min(116px, 34%) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  align-items: center;
  gap: 0 var(--space-4);
}
.bio-bank-choice .bio-template-mini[data-layout] {
  grid-column: 1;
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  height: 60px;
  padding: 8px;
  background: var(--bio-logo-ground, var(--white));
  box-shadow: none;
}
.bio-template-choice.bio-bank-choice .bio-template-mini img {
  max-width: 100%;
  width: 100px;
  height: 36px;
  align-self: center;
  justify-self: center;
  object-fit: contain;
  border-radius: 0;
}
.bio-bank-choice > .choice-card-name {
  grid-column: 2;
  grid-row: 2;
}
.bio-bank-choice > .bio-template-note {
  grid-column: 2;
  grid-row: 3;
  margin-top: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .bio-template-mini[data-drawn] > .bio-template-render {
    animation: none;
  }
}
.bio-accent-control {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.bio-accent-control input[type=color] {
  width: 64px;
  padding: 4px;
  height: 44px;
}
.bio-link-editor {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}
.bio-link-editor .field {
  margin-bottom: var(--space-3);
}
.bio-link-editor .actions {
  justify-content: flex-start;
  gap: var(--space-1);
}
.bio-link-editor .actions button {
  min-width: 44px;
  min-height: 44px;
  padding-inline: 10px;
  font-size: var(--text-sm);
}
.bio-publish-review {
  margin: var(--space-6) 0;
}
.bio-publish-review h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
}
.bio-editor .logo-editor {
  margin-top: 28px;
}
.bio-editor .logo-preview {
  max-width: 120px;
}
.bio-editor .logo-preview img {
  max-height: 120px;
}
.share-panel-qr-image > svg {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 1024px) {
  .bio-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
    gap: var(--space-5);
  }
  .bio-editor {
    --flow-pad: 20px;
  }
}
@media (max-width: 820px) {
  .bio-workspace {
    display: block;
  }
}
@media (max-width: 380px) {
  .bio-editor {
    --flow-pad: 16px;
  }
}
.bio-qr-preview svg {
  width: 100%;
  height: auto;
  display: block;
}
.bio-public-tools {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0;
}
.bio-public-qr {
  width: 180px;
  margin: 20px auto;
}
.bio-public-qr svg {
  display: block;
  width: 100%;
  height: auto;
}
.bio-public-report summary {
  cursor: pointer;
  min-height: 44px;
  padding: 10px 0;
}
.bio-public-report form {
  padding-top: 16px;
}

/* src/bio-editor-public.css */
.bio-public-layout {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 280px);
  gap: 40px;
  align-items: start;
}
#bio-preview,
#bio-public-card {
  container-type: inline-size;
  container-name: bio-card-frame;
}
.bio-public-layout--branded {
  max-width: 1120px;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.bio-public-layout--branded .bio-public-tools {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: start;
  gap: 12px 28px;
}
.bio-public-layout--branded .bio-public-tools > :not(.bio-qr-preview) {
  grid-column: 2;
}
.bio-public-layout--branded .bio-public-tools .bio-qr-preview {
  grid-column: 1;
  grid-row: 1 / span 4;
  width: 180px;
  margin: 0;
  min-height: 180px;
  aspect-ratio: 1;
}
.bio-public-layout--branded .bio-public-tools > .bio-public-report {
  grid-column: 1 / -1;
  margin-top: 12px;
}
@container bio-card-frame (max-width: 42rem) {
  .bio-card[data-theme=bank]:where(:not([data-layout-mode=shared])) {
    display: block !important;
  }
  .bio-card[data-theme=bank]:where(:not([data-layout-mode=shared])) :is(.bio-card-header, .bio-card-body, .bio-card-foot) {
    padding-inline: 24px !important;
  }
  .bio-card[data-theme=bank]:where(:not([data-layout-mode=shared])) .bio-person {
    flex-wrap: wrap;
  }
  .bio-card[data-theme=bank]:where(:not([data-layout-mode=shared])) .bio-person-name {
    min-width: min(100%, 14rem);
  }
  .bio-card[data-theme=bank]:where(:not([data-layout-mode=shared])) .bio-avatar {
    min-width: 2.75rem;
    min-height: 2.75rem;
    flex-shrink: 0;
  }
  .bio-card[data-theme=bank]:where(:not([data-layout-mode=shared])) .bio-save-contact {
    gap: 12px;
    padding-inline: 14px;
  }
  .bio-card[data-theme=bank]:where(:not([data-layout-mode=shared])) .bio-save-contact svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
  }
  .bio-card[data-theme=bank]:where(:not([data-layout-mode=shared])) .bio-card-foot {
    flex-wrap: wrap;
  }
}
@container bio-card-frame (max-width: 380px) {
  .bio-card[data-theme=bank]:where(:not([data-layout-mode=shared])) :is(.bio-card-header, .bio-card-body, .bio-card-foot) {
    padding-inline: 20px !important;
  }
}
@container bio-card-frame (max-width: 320px) {
  .bio-card[data-theme=bank][data-layout-mode=original]:is([data-bank-bin="970448"], [data-bank-bin="970443"], [data-bank-bin="970425"], [data-bank-bin="970428"], [data-bank-bin="970421"]) .bio-person-name :is(h1, h3) {
    font-size: 1.5rem;
  }
}
@media (max-width: 640px) {
  .bio-public-layout--branded .bio-public-tools {
    grid-template-columns: minmax(0, 1fr);
  }
  .bio-public-layout--branded .bio-public-tools > :not(.bio-qr-preview),
  .bio-public-layout--branded .bio-public-tools .bio-qr-preview {
    grid-column: 1;
    grid-row: auto;
  }
  .bio-public-layout--branded .bio-public-tools .bio-qr-preview {
    margin-inline: auto;
  }
}
.bio-public-tools {
  padding: 24px 0;
}
.bio-public-tools h2 {
  font-size: var(--text-lg);
}
.bio-public-tools .bio-qr-preview {
  max-width: 180px;
  margin: var(--space-6) auto;
}
.bio-public-tools .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.bio-public-tools button {
  min-height: 44px;
}
.bio-public-report {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.bio-public-report summary {
  padding: 12px 0;
  cursor: pointer;
}
.bio-public-layout .bio-card h1 {
  font-size: clamp(1.75rem, 4vw, 2.4rem);
}
@media (max-width: 820px) {
  .bio-public-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    max-width: 540px;
  }
  .bio-public-tools {
    padding: 0 12px;
  }
  .bio-public-tools .actions {
    justify-content: center;
  }
  .bio-public-tools h2 {
    text-align: center;
  }
}
body[data-page=bio-landing] .site-header .shell-menu-panel,
body[data-page=bio-landing] .shell-signin,
body[data-page=bio-landing] .shell-member,
body[data-page=bio-landing] .shell-menu-toggle,
body[data-page=bio-landing] .header-help,
body[data-page=bio-landing] .site-footer {
  display: none !important;
}
body[data-page=bio-landing] .shell-header-inner {
  justify-content: space-between;
}
body[data-page=bio-landing] .main-content {
  padding-top: 40px;
}
.bio-qr-preview svg,
.bio-qr-preview svg *,
.bio-print-sheet svg,
.bio-print-sheet svg * {
  stroke: none;
}
.bio-print-watermark[data-blend-mode=multiply] {
  mix-blend-mode: multiply;
}
.bio-public-tools {
  display: block;
  margin: 0;
}
.bio-save-bar #bio-retention {
  order: 3;
  flex-basis: 100%;
  font-size: var(--text-xs);
}
.bio-public-report summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.bio-public-report summary::-webkit-details-marker {
  display: none;
}
.bio-public-report summary::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  margin-right: 4px;
}
.bio-public-report[open] summary::after {
  transform: rotate(45deg);
}
@media (max-width: 480px) {
  .bio-card-foot img {
    flex-basis: auto;
  }
}
@page bio-business-card {
  size: 85mm 55mm;
  margin: 0;
}
@page bio-business-sheet {
  size: A4;
  margin: 0;
}
@media print {
  body:has(> #print-root[data-bio-print-paper]) > :not(#print-root) {
    display: none !important;
  }
  body:has(> #print-root[data-bio-print-paper=card]) {
    page: bio-business-card;
  }
  body:has(> #print-root[data-bio-print-paper=a4]) {
    page: bio-business-sheet;
  }
  #print-root[data-bio-print-paper=card] {
    padding: 0 !important;
    page: bio-business-card;
  }
  #print-root[data-bio-print-paper=a4] {
    padding: 10mm !important;
    page: bio-business-sheet;
  }
  .bio-print-sheet {
    display: grid;
    grid-template-columns: 85mm;
    width: 85mm;
    gap: 0;
    margin: 0 auto;
  }
  #print-root[data-bio-print-paper=a4] .bio-print-sheet {
    grid-template-columns: repeat(2, 85mm);
    width: 190mm;
    gap: 0 10mm;
  }
  .bio-print-sheet > div {
    width: 85mm;
    height: 55mm;
    break-inside: avoid;
  }
  .bio-print-sheet > div > svg {
    display: block;
    width: 85mm;
    height: 55mm;
    stroke: none;
  }
}

/* src/bio-editor-layouts.css */
.bio-bank-email {
  margin: 0 0 32px;
  padding: 24px;
  background: var(--ground);
  border-radius: var(--radius-lg);
}
.bio-bank-email h3 {
  margin: 0 0 10px;
  font-size: var(--text-lg);
}
.bio-bank-email label {
  display: block;
  margin: 18px 0 8px;
  font-weight: 600;
}
.bio-bank-email input {
  width: 100%;
  min-width: 0;
}
.bio-work-state {
  font-size: var(--text-md);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.bio-work-code-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}
.bio-work-code-row input {
  flex: 1 1 140px;
  width: 140px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}
.bio-work-code-row button {
  flex: 1 1 160px;
}
@media (max-width: 380px) {
  .bio-bank-email {
    padding: 18px 14px;
  }
}
.bio-policy-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 16px;
  align-items: end;
  margin: 24px 0;
}
.bio-policy-form .field {
  margin: 0;
}
.bio-bank-email .field-help,
#admin-work-policies h3 {
  overflow-wrap: anywhere;
}
.bio-card[data-bank-bin][data-layout][data-contact-only=true] .bio-card-body {
  display: block;
}
.bio-card[data-bank-bin][data-layout][data-contact-only=true] .bio-save-contact {
  width: 100%;
}
.bio-card[data-bank-bin][data-layout][data-contact-only=true] .bio-contact-actions {
  margin-top: 24px;
}
.bio-card[data-bank-bin][data-layout][data-contact-only=true] .bio-card-links:has(> a) {
  margin-top: 24px;
}
.bio-layout-section {
  margin-block: 28px;
}
.bio-layout-section h3 {
  margin-bottom: 14px;
}
.bio-layout-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.bio-layout-choice {
  gap: var(--space-2);
}
.bio-layout-mini {
  position: relative;
  display: block;
  height: 108px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}
.bio-layout-choice .bio-layout-mini img {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 62px;
  height: 20px;
  object-fit: contain;
  object-position: left;
}
.bio-layout-mini i {
  position: absolute;
  display: block;
}
.bio-layout-avatar {
  top: 40px;
  left: 10px;
  width: 22px;
  height: 25px;
  border-radius: var(--radius-sm);
  background: var(--bio-primary);
  opacity: 0.25;
}
.bio-layout-name {
  left: 40px;
  top: 43px;
  width: 44%;
  height: 6px;
  background: var(--ink);
}
.bio-layout-details {
  left: 40px;
  top: 56px;
  width: 34%;
  height: 3px;
  background: var(--input-line);
  box-shadow: 0 9px var(--line);
}
.bio-layout-mini[data-layout=split-panel-v1] {
  background:
    linear-gradient(
      90deg,
      var(--bio-surface) 45%,
      white 45%);
}
.bio-layout-mini[data-layout=split-panel-v1] .bio-layout-name,
.bio-layout-mini[data-layout=split-panel-v1] .bio-layout-details {
  left: 54%;
}
.bio-layout-mini[data-layout=centered-v1] img {
  left: calc(50% - 31px);
}
.bio-layout-mini[data-layout=centered-v1] .bio-layout-avatar {
  left: calc(50% - 11px);
  top: 35px;
  height: 22px;
  border-radius: 50%;
}
.bio-layout-mini[data-layout=centered-v1] .bio-layout-name {
  left: 28%;
  top: 65px;
}
.bio-layout-mini[data-layout=centered-v1] .bio-layout-details {
  left: 33%;
  top: 79px;
}
.bio-layout-mini[data-layout=editorial-v1] .bio-layout-avatar {
  left: auto;
  right: 12px;
  height: 37px;
}
.bio-layout-mini[data-layout=editorial-v1] .bio-layout-name,
.bio-layout-mini[data-layout=editorial-v1] .bio-layout-details {
  left: 10px;
}
.bio-layout-mini[data-layout=framed-v1] {
  border: 8px solid var(--white);
  background: var(--bio-surface);
}
.bio-layout-mini[data-layout=signature-v1] .bio-layout-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.bio-layout-mini[data-layout=signature-v1] .bio-layout-name {
  left: 10px;
  top: 67px;
  width: 68%;
  height: 8px;
}
.bio-layout-mini[data-layout=signature-v1] .bio-layout-details {
  left: 10px;
  top: 84px;
}
.bio-layout-mini[data-layout=ribbon-v1] {
  border-top: 6px solid var(--bio-primary);
}

/* src/bio-editor-flow.css */
.bio-contact-email {
  margin-block: var(--space-6);
  container-type: inline-size;
  container-name: bio-contact-email;
}
.bio-contact-email-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 8px;
}
.bio-contact-email-heading > label:first-child {
  font-size: var(--text-md);
  font-weight: 600;
}
.bio-contact-email-heading .check {
  min-height: 44px;
  align-items: center;
  margin: 0;
  font-size: var(--text-sm);
}
.bio-contact-email-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
}
.bio-contact-email-entry:not(:has(> .button:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr);
}
.bio-contact-email-entry > input {
  min-width: 0;
}
.bio-contact-email-entry .button {
  min-inline-size: 11em;
}
.bio-contact-email[data-state=code] .bio-contact-email-entry,
.bio-contact-email[data-state=confirmed] .bio-contact-email-entry {
  grid-template-columns: minmax(0, 1fr);
}
.bio-contact-email .actions {
  gap: var(--space-3);
  flex-wrap: wrap;
}
.bio-contact-email-challenge {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--ground);
}
.bio-contact-email-challenge > input {
  display: block;
  max-inline-size: 19ch;
  margin-block: 8px;
  letter-spacing: 0.16em;
  font-size: var(--text-lg);
}
.bio-contact-email-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  margin-top: 6px;
}
.bio-contact-email .bio-contact-email-feedback .field-help {
  margin: 0;
}
.bio-contact-email-feedback > .text-button {
  min-height: var(--control-height);
}
.bio-contact-email-challenge .actions {
  margin-top: var(--space-3);
  align-items: center;
}
.bio-contact-email-challenge .text-button {
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: 4px;
}
@container bio-contact-email (max-width: 420px) {
  .bio-contact-email-entry {
    grid-template-columns: minmax(0, 1fr);
  }
  .bio-contact-email-entry .button {
    justify-self: start;
    min-inline-size: 44px;
    max-inline-size: 100%;
    white-space: normal;
  }
  .bio-contact-email-challenge > input {
    font-size: 1rem;
    letter-spacing: 0.06em;
  }
  .bio-contact-email-challenge .actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-3);
  }
  #bio-contact-email-verify {
    grid-column: 1 / -1;
  }
  #bio-contact-email-send {
    justify-self: start;
    text-align: start;
    max-inline-size: 100%;
  }
}
.bio-contact-email-state-confirmed {
  color: var(--action);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bio-contact-email-state-confirmed svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bio-links-heading {
  margin-top: 8px;
}
#bio-accent-state:empty {
  display: none;
}
.bio-links-status:empty,
.bio-publish-status:empty,
#bio-template-count:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.bio-links-status button,
.bio-slug-suggestions button {
  min-height: 44px;
}
.bio-slug-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 4px;
  font-size: var(--text-sm);
}
.bio-check-help {
  margin: 0 0 var(--space-4) 30px;
}
.bio-search-visibility {
  margin-bottom: 4px;
}
.bio-publish-note {
  margin: var(--space-3) 0;
}
.bio-publish-note p {
  margin: 0;
}
.bio-publish-help {
  margin-top: var(--space-5);
}
.bio-publish-status {
  margin: var(--space-3) 0 0;
}
#bio-published-note {
  margin: var(--space-5) 0 0;
}
#bio-published-note[hidden] {
  display: none;
}
.bio-template-more {
  width: 100%;
  margin: -8px 0 20px;
}
.bio-finish-export {
  display: none;
}
@media (max-width: 820px) {
  .bio-finish-export {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
    margin: 0 0 var(--space-5);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--control-radius);
    background: var(--ground);
    font-size: var(--text-sm);
  }
}
.preview-sheet-body > .bio-preview-views {
  display: flex;
  justify-self: start;
  width: fit-content;
  margin: var(--space-3) var(--space-4);
}
.preview-sheet-body > .bio-print-view {
  margin: var(--space-4) auto;
  padding-inline: var(--space-4);
  box-sizing: border-box;
}
.preview-sheet-body[data-bio-view=card] > .bio-print-view {
  display: grid;
}
.preview-sheet-body[data-bio-view=card] > .preview-page {
  display: none;
}
.preview-sheet-body > .bio-export {
  margin: 0;
  border-width: 1px 0 0;
  border-radius: 0;
  padding: var(--space-4);
}
.bio-print-dialog {
  max-width: 400px;
}
.bio-print-sizes {
  display: grid;
  gap: var(--space-1);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.bio-print-sizes > legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: var(--text-md);
  font-weight: 600;
}
.bio-print-sizes > .check {
  min-height: 44px;
  align-items: center;
  margin: 0;
}

/* src/bio-themes.css */
.bio-card {
  --bio-primary: #175cd3;
  --bio-on-primary: #fff;
  --bio-surface: #f1f5fa;
  --bio-text: #182b42;
  background: #fff;
  color: var(--bio-text);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 28px #182b4210;
  min-width: 0;
}
.bio-card-header {
  position: relative;
  isolation: isolate;
  padding: 32px 28px 24px;
  overflow: hidden;
  background: var(--bio-surface);
}
.bio-person {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.bio-person-name {
  min-width: 0;
}
.bio-person h1,
.bio-person h3 {
  font-size: 1.65rem;
  line-height: 1.3;
  letter-spacing: -0.025em;
  margin: 0;
  overflow-wrap: anywhere;
  color: inherit;
}
.bio-person p {
  margin: 7px 0 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.bio-role {
  font-size: 0.9375rem;
  font-weight: 600;
}
.bio-organization,
.bio-branch {
  font-size: 0.8125rem;
}
.bio-avatar {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--bio-primary);
}
.bio-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bio-avatar span {
  font-size: 1.5rem;
  font-weight: 600;
}
.bio-bank-watermark {
  position: absolute;
  width: 78%;
  height: 180px;
  right: -12%;
  top: -20px;
  object-fit: contain;
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
}
.bio-bank-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  position: relative;
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 0;
}
.bio-bank-identity img {
  width: 100px;
  height: 36px;
  object-fit: contain;
  object-position: left center;
}
.bio-bank-identity span {
  overflow-wrap: anywhere;
}
.bio-bank-identity .bio-bank-label {
  font-size: var(--text-md);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.bio-card-body {
  padding: 24px 28px;
}
.bio-description {
  margin: 0 0 24px;
  white-space: pre-wrap;
  font-size: 0.9375rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.bio-save-contact {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 6px;
  background: var(--bio-primary);
  color: var(--bio-on-primary);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 18px;
}
.bio-save-contact:hover {
  filter: brightness(0.94);
  color: var(--bio-on-primary);
}
.bio-save-contact svg,
.bio-card-links svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.bio-contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.bio-contact-action {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--bio-text);
  padding: 13px 14px;
  background: #f5f7fa;
  border-radius: 6px;
  min-width: 0;
  min-height: 64px;
}
.bio-contact-action span {
  font-size: 0.75rem;
  color: #52647a;
}
.bio-contact-action strong {
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.bio-contact-action .bio-email-confirmation {
  display: inline-flex;
  vertical-align: -0.15em;
  color: #1559cb;
}
.bio-email-confirmation svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bio-contact-action:hover {
  background: #e9eff7;
  color: var(--bio-text);
}
.bio-card-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.bio-card-links:empty {
  display: none;
}
.bio-card-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--bio-text);
  text-decoration: none;
  border: 1px solid #d5dee9;
  border-radius: 6px;
  padding: 12px 14px;
  min-height: 48px;
  font-size: 0.875rem;
}
.bio-card-links a span {
  overflow-wrap: anywhere;
}
.bio-card-links a:hover {
  background: #f5f7fa;
}
.bio-services {
  margin-top: 26px;
}
.bio-services h2 {
  font-size: 0.875rem;
  margin: 0 0 12px;
}
.bio-services ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.bio-services li {
  padding: 6px 10px;
  font-size: 0.75rem;
  background: #f1f5fa;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.bio-office {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 24px 0 0;
}
.bio-office div {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 12px;
  font-size: 0.8125rem;
}
.bio-office dt {
  color: #52647a;
}
.bio-office dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.bio-card-foot {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-top: 1px solid #e5eaf0;
}
.bio-card-foot p {
  font-size: 0.6875rem;
  line-height: 1.6;
  color: #52647a;
  max-width: 28ch;
  margin: 0;
}
.bio-card-foot img {
  width: 100px;
  height: auto;
  flex: 0 0 100px;
}
.bio-card a:focus-visible {
  outline: 2px solid #175cd3;
  outline-offset: 3px;
}
.bio-card[data-theme=professional] .bio-card-header {
  background: var(--bio-primary);
  color: var(--bio-on-primary);
  padding-top: 40px;
  padding-bottom: 36px;
}
.bio-card:is([data-theme=essential], [data-theme=business]):not([data-layout-mode=shared]) .bio-person {
  align-items: flex-start;
}
.bio-card[data-theme=professional] .bio-person {
  align-items: flex-start;
  flex-direction: column;
}
.bio-card[data-theme=professional] .bio-person h3,
.bio-card[data-theme=professional] .bio-person h1 {
  font-size: 1.9rem;
}
.bio-card[data-theme=studio] .bio-card-header {
  padding-top: 44px;
  background: #f9eee8;
}
.bio-card[data-theme=studio] .bio-person {
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: space-between;
}
.bio-card[data-theme=studio] .bio-avatar {
  border-radius: 0;
  width: 88px;
  height: 100px;
  flex-basis: 88px;
}
.bio-card[data-theme=studio] .bio-person h1,
.bio-card[data-theme=studio] .bio-person h3 {
  font-size: 1.9rem;
}
.bio-card[data-theme=editorial] .bio-card-header {
  background: #fff;
  padding-bottom: 12px;
}
.bio-card[data-theme=editorial] .bio-person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bio-card[data-theme=editorial] .bio-person-name {
  border-bottom: 1px solid #d5dee9;
  width: 100%;
  padding-bottom: 24px;
}
.bio-card[data-theme=editorial] .bio-avatar {
  width: 96px;
  height: 96px;
  flex-basis: 96px;
}
.bio-card[data-theme=editorial] .bio-card-body {
  padding-top: 12px;
}
.bio-card[data-theme=social] .bio-person {
  flex-direction: column;
  text-align: center;
}
.bio-card[data-theme=social] .bio-avatar {
  border-radius: 50%;
  width: 96px;
  height: 96px;
  flex-basis: 96px;
}
.bio-card[data-theme=social] .bio-card-header {
  padding-top: 36px;
  padding-bottom: 32px;
}
.bio-card[data-theme=social] .bio-description {
  text-align: center;
}
.bio-card[data-theme=business] .bio-card-header {
  background: #fff;
  border-top: 12px solid var(--bio-primary);
}
.bio-card[data-theme=business] .bio-avatar {
  background: var(--bio-surface);
}
.bio-card[data-theme=business] .bio-contact-actions {
  grid-template-columns: 1fr;
}
.bio-card[data-theme=bank][data-layout=signature] .bio-card-header {
  border-top: 8px solid var(--bio-primary);
}
.bio-card[data-theme=bank][data-layout=side-panel] .bio-person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
}
.bio-card[data-theme=bank][data-layout=side-panel] .bio-avatar {
  grid-column: 2;
  grid-row: 1;
}
.bio-card[data-theme=bank][data-layout=side-panel] .bio-person-name {
  grid-column: 1;
  grid-row: 1;
}
.bio-card[data-theme=bank][data-layout=side-panel] .bio-card-header {
  border-bottom: 6px solid var(--bio-primary);
}
.bio-card[data-theme=bank][data-layout=crest] .bio-bank-identity {
  justify-content: center;
}
.bio-card[data-theme=bank][data-layout=crest] .bio-person {
  flex-direction: column;
  text-align: center;
}
.bio-card[data-theme=bank][data-layout=crest] .bio-avatar {
  border-radius: 50%;
}
.bio-card[data-theme=bank][data-layout=ribbon] .bio-bank-identity {
  justify-content: flex-end;
}
.bio-card[data-theme=bank][data-layout=ribbon] .bio-person {
  align-items: flex-start;
  flex-direction: column;
}
.bio-card[data-theme=bank][data-layout=ribbon] .bio-card-header {
  border-bottom: 8px solid var(--bio-accent);
}
.bio-card[data-theme=bank][data-layout=editorial] .bio-card-header {
  background: #fff;
}
.bio-card[data-theme=bank][data-layout=editorial] .bio-person {
  align-items: flex-start;
  flex-direction: column;
}
.bio-card[data-theme=bank][data-layout=editorial] .bio-bank-identity {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bio-primary);
}
.bio-card[data-theme=bank][data-layout=frame] .bio-card-header {
  margin: 14px 14px 0;
  padding: 22px 18px;
  border: 1px solid var(--bio-primary);
  border-radius: 4px;
}
.bio-card[data-theme=bank][data-layout=frame] .bio-bank-identity {
  margin-bottom: 20px;
}
@media (max-width: 440px) {
  .bio-card-header {
    padding: 24px 20px;
  }
  .bio-card-body {
    padding: 20px;
  }
  .bio-person {
    gap: 14px;
  }
  .bio-person h1,
  .bio-person h3 {
    font-size: 1.45rem;
  }
  .bio-avatar {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }
  .bio-card-foot {
    padding: 16px 20px;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .bio-contact-actions {
    grid-template-columns: 1fr;
  }
  .bio-office div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .bio-card[data-theme=studio] .bio-person {
    flex-direction: column-reverse;
  }
  .bio-card[data-theme=bank][data-layout=side-panel] .bio-person {
    grid-template-columns: 1fr;
  }
  .bio-card[data-theme=bank][data-layout=side-panel] .bio-avatar {
    grid-column: 1;
    grid-row: 1;
  }
  .bio-card[data-theme=bank][data-layout=side-panel] .bio-person-name {
    grid-column: 1;
    grid-row: 2;
  }
}
@supports (container-type: inline-size) {
  @container public-frame (max-width: 440px) {
    .bio-card-header {
      padding: 24px 20px;
    }
    .bio-card-body {
      padding: 20px;
    }
    .bio-person {
      gap: 14px;
    }
    .bio-person h1,
    .bio-person h3 {
      font-size: 1.45rem;
    }
    .bio-avatar {
      width: 60px;
      height: 60px;
      flex-basis: 60px;
    }
    .bio-card-foot {
      padding: 16px 20px;
      align-items: flex-start;
      flex-direction: column;
      gap: 10px;
    }
    .bio-contact-actions {
      grid-template-columns: 1fr;
    }
    .bio-office div {
      grid-template-columns: 1fr;
      gap: 4px;
    }
    .bio-card[data-theme=studio] .bio-person {
      flex-direction: column-reverse;
    }
    .bio-card[data-theme=bank][data-layout=side-panel] .bio-person {
      grid-template-columns: 1fr;
    }
    .bio-card[data-theme=bank][data-layout=side-panel] .bio-avatar {
      grid-column: 1;
      grid-row: 1;
    }
    .bio-card[data-theme=bank][data-layout=side-panel] .bio-person-name {
      grid-column: 1;
      grid-row: 2;
    }
  }
}
@media (forced-colors: active) {
  .bio-bank-watermark {
    display: none;
  }
  .bio-save-contact,
  .bio-card-links a,
  .bio-contact-action {
    border: 1px solid ButtonText;
  }
}
.bio-card[data-theme=professional] {
  --bio-primary: #102a43;
  --bio-on-primary: #fff;
}
.bio-card[data-theme=studio] {
  --bio-primary: #9a472b;
  --bio-on-primary: #fff;
}
.bio-card[data-theme=editorial] {
  --bio-primary: #313a49;
  --bio-on-primary: #fff;
}
.bio-card[data-theme=social] {
  --bio-primary: #175cd3;
  --bio-on-primary: #fff;
}
.bio-card[data-theme=business] {
  --bio-primary: #285550;
  --bio-on-primary: #fff;
}
@media (max-width: 440px) {
  .bio-card-foot img {
    flex: 0 0 auto;
  }
}
@supports (container-type: inline-size) {
  @container public-frame (max-width: 440px) {
    .bio-card-foot img {
      flex: 0 0 auto;
    }
  }
}
.bio-card[data-layout=vcb-premium] .bio-card-header {
  background: #f4f7f6;
  padding: 34px 32px 36px;
}
.bio-card[data-layout=vcb-premium] .bio-bank-identity {
  justify-content: center;
  margin-bottom: 30px;
}
.bio-card[data-layout=vcb-premium] .bio-bank-identity img {
  width: 154px;
  height: 42px;
}
.bio-card[data-layout=vcb-premium] .bio-person {
  flex-direction: column;
  text-align: center;
  gap: 20px;
}
.bio-card[data-layout=vcb-premium] .bio-avatar {
  width: 88px;
  height: 88px;
  flex-basis: 88px;
  border-radius: 50%;
  background: #fff;
}
.bio-card[data-layout=vcb-premium] .bio-person-name {
  width: 100%;
}
.bio-card[data-layout=vcb-premium] .bio-person h1,
.bio-card[data-layout=vcb-premium] .bio-person h3 {
  color: #00512f;
  font-size: 1.85rem;
}
.bio-card[data-layout=vcb-premium] .bio-role {
  margin-top: 12px;
}
.bio-card[data-layout=vcb-premium] .bio-branch {
  color: #345e4b;
  margin-top: 16px;
}
.bio-card[data-layout=vcb-premium] .bio-bank-watermark {
  top: -70px;
  left: auto;
  right: -105px;
  width: 340px;
  height: 340px;
  opacity: 0.035;
}
@media (max-width: 680px) {
  .bio-card[data-layout=vcb-premium] .bio-bank-watermark {
    top: -56px;
    right: -96px;
    width: 280px;
    height: 280px;
  }
}
@supports (container-type: inline-size) {
  @container public-frame (max-width: 680px) {
    .bio-card[data-layout=vcb-premium] .bio-bank-watermark {
      top: -56px;
      right: -96px;
      width: 280px;
      height: 280px;
    }
  }
}
.bio-card[data-layout=vcb-premium] .bio-card-body {
  padding: 30px 32px;
}
.bio-card[data-layout=vcb-premium] .bio-description {
  text-align: center;
  margin-bottom: 26px;
}
.bio-card[data-layout=vcb-premium] .bio-save-contact {
  background: #00512f;
  color: #fff;
}
.bio-card[data-layout=vcb-premium] .bio-services {
  background: #f4f7f6;
  padding: 22px;
  border-radius: 12px;
}
.bio-card[data-layout=vcb-premium] .bio-card-foot {
  background: #f4f7f6;
  border: 0;
}
.bio-card[data-layout=tcb-premium] .bio-card-header {
  background: #fff;
  padding: 32px 32px 28px;
}
.bio-card[data-layout=tcb-premium] .bio-bank-identity {
  justify-content: flex-start;
  margin-bottom: 36px;
}
.bio-card[data-layout=tcb-premium] .bio-bank-identity img {
  width: 170px;
  height: 38px;
}
.bio-card[data-layout=tcb-premium] .bio-person {
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}
.bio-card[data-layout=tcb-premium] .bio-avatar {
  width: 82px;
  height: 100px;
  flex-basis: 82px;
  border-radius: 8px;
  background: #f5f7fa;
  color: #061922;
}
.bio-card[data-layout=tcb-premium] .bio-person-name {
  flex: 1;
  padding-top: 10px;
}
.bio-card[data-layout=tcb-premium] .bio-person-name::before {
  content: "";
  display: block;
  width: 32px;
  height: 4px;
  margin-bottom: 18px;
  background: #ec1c24;
}
.bio-card[data-layout=tcb-premium] .bio-person h1,
.bio-card[data-layout=tcb-premium] .bio-person h3 {
  color: #061922;
  font-size: 1.9rem;
}
.bio-card[data-layout=tcb-premium] .bio-branch {
  margin-top: 20px;
}
.bio-card[data-layout=tcb-premium] .bio-bank-watermark {
  top: 0;
  right: -22%;
  width: 70%;
  height: 180px;
  opacity: 0.025;
}
.bio-card[data-layout=tcb-premium] .bio-card-body {
  background: #f5f7fa;
  padding: 28px 32px 32px;
}
.bio-card[data-layout=tcb-premium] .bio-save-contact {
  background: #061922;
  color: #fff;
}
.bio-card[data-layout=tcb-premium] .bio-contact-action {
  background: #fff;
}
.bio-card[data-layout=tcb-premium] .bio-card-foot {
  border: 0;
}
.bio-work-confirmation {
  margin: 0;
  padding: 16px 28px;
  font-size: 0.75rem;
  line-height: 1.65;
  color: #345e4b;
  background: #f4f7f6;
}
.bio-work-confirmation span {
  display: block;
  color: #52647a;
}
@media (max-width: 540px) {
  .bio-card[data-layout=vcb-premium] .bio-card-header,
  .bio-card[data-layout=tcb-premium] .bio-card-header {
    padding: 28px 22px;
  }
  .bio-card[data-layout=vcb-premium] .bio-card-body,
  .bio-card[data-layout=tcb-premium] .bio-card-body {
    padding: 24px 22px;
  }
  .bio-card[data-layout=tcb-premium] .bio-person {
    flex-direction: column;
    gap: 18px;
  }
  .bio-card[data-layout=tcb-premium] .bio-person-name {
    width: 100%;
    padding-top: 0;
  }
  .bio-card[data-layout=tcb-premium] .bio-avatar {
    width: 72px;
    height: 88px;
    flex-basis: 88px;
  }
  .bio-card[data-layout=vcb-premium] .bio-person h1,
  .bio-card[data-layout=vcb-premium] .bio-person h3,
  .bio-card[data-layout=tcb-premium] .bio-person h1,
  .bio-card[data-layout=tcb-premium] .bio-person h3 {
    font-size: 1.55rem;
  }
}
@supports (container-type: inline-size) {
  @container public-frame (max-width: 540px) {
    .bio-card[data-layout=vcb-premium] .bio-card-header,
    .bio-card[data-layout=tcb-premium] .bio-card-header {
      padding: 28px 22px;
    }
    .bio-card[data-layout=vcb-premium] .bio-card-body,
    .bio-card[data-layout=tcb-premium] .bio-card-body {
      padding: 24px 22px;
    }
    .bio-card[data-layout=tcb-premium] .bio-person {
      flex-direction: column;
      gap: 18px;
    }
    .bio-card[data-layout=tcb-premium] .bio-person-name {
      width: 100%;
      padding-top: 0;
    }
    .bio-card[data-layout=tcb-premium] .bio-avatar {
      width: 72px;
      height: 88px;
      flex-basis: 88px;
    }
    .bio-card[data-layout=vcb-premium] .bio-person h1,
    .bio-card[data-layout=vcb-premium] .bio-person h3,
    .bio-card[data-layout=tcb-premium] .bio-person h1,
    .bio-card[data-layout=tcb-premium] .bio-person h3 {
      font-size: 1.55rem;
    }
  }
}
[data-organization=ubgroup] {
  --bio-primary: #1b75bc;
  --bio-on-primary: #fff;
  --bio-accent: #000;
  --bio-surface: #f5f8fb;
  --bio-text: #182b42;
}
.bio-card[data-layout=organization] .bio-card-header {
  background: #fff;
  padding: 32px;
}
.bio-card[data-layout=organization] .bio-bank-identity {
  justify-content: flex-start;
  margin-bottom: 36px;
}
.bio-card[data-layout=organization] .bio-bank-identity img {
  width: 170px;
  height: 42px;
}
.bio-card[data-layout=organization] .bio-person {
  align-items: flex-start;
}
.bio-card[data-layout=organization] .bio-person h1,
.bio-card[data-layout=organization] .bio-person h3 {
  color: #000;
  font-size: 1.85rem;
}
.bio-card[data-layout=organization] .bio-role {
  color: var(--bio-action, #165a90);
}
.bio-card[data-layout=organization] .bio-bank-watermark {
  top: auto;
  bottom: -88px;
  right: -112px;
  width: 280px;
  height: 280px;
  opacity: 0.035;
}
.bio-card[data-layout=organization]:not([data-organization=ubgroup]) .bio-bank-identity img {
  height: 52px;
}
.bio-card[data-layout=organization] .bio-card-body {
  background: var(--bio-surface, #f5f8fb);
  padding: 28px 32px;
}
.bio-card[data-layout=organization] .bio-save-contact {
  background: var(--bio-action, #165a90);
  color: var(--bio-on-action, #fff);
}
.bio-card[data-layout=organization] .bio-card-foot {
  border: 0;
}
@media (max-width: 540px) {
  .bio-card[data-layout=organization] .bio-card-header,
  .bio-card[data-layout=organization] .bio-card-body {
    padding: 26px 22px;
  }
  .bio-card[data-layout=organization] .bio-person {
    flex-direction: column;
  }
  .bio-card[data-layout=organization] .bio-person h1,
  .bio-card[data-layout=organization] .bio-person h3 {
    font-size: 1.55rem;
  }
}
@supports (container-type: inline-size) {
  @container public-frame (max-width: 540px) {
    .bio-card[data-layout=organization] .bio-card-header,
    .bio-card[data-layout=organization] .bio-card-body {
      padding: 26px 22px;
    }
    .bio-card[data-layout=organization] .bio-person {
      flex-direction: column;
    }
    .bio-card[data-layout=organization] .bio-person h1,
    .bio-card[data-layout=organization] .bio-person h3 {
      font-size: 1.55rem;
    }
  }
}

/* src/bio-layouts.css */
.bio-card[data-layout-mode=shared] {
  --bio-shared-ink: #182b42;
  --bio-shared-muted: #52647a;
  --bio-shared-tint: #f5f7fa;
  --bio-shared-tint: color-mix(in srgb, var(--bio-primary) 7%, white);
  background: #fff;
  color: var(--bio-shared-ink);
  border-radius: 12px;
  isolation: isolate;
  container-type: inline-size;
}
.bio-card[data-layout-mode=shared] .bio-card-header {
  padding: 36px 32px;
  background: var(--bio-shared-tint);
  min-width: 0;
}
.bio-card[data-layout-mode=shared] .bio-bank-identity {
  margin-bottom: 36px;
  min-height: 40px;
}
.bio-card[data-layout-mode=shared] .bio-bank-identity img {
  width: 172px;
  height: 52px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  background: var(--bio-logo-ground, transparent);
}
.bio-card[data-organization]:not([data-organization=""]) .bio-bank-identity img {
  background: transparent;
}
.bio-card[data-layout-mode=shared] .bio-bank-watermark {
  width: 280px;
  height: 280px;
  max-width: none;
  top: auto;
  bottom: -88px;
  left: auto;
  right: -112px;
  opacity: 0.04;
  filter: var(--bio-light-symbol-filter, none);
  object-fit: contain;
  z-index: -1;
}
.bio-card[data-layout-mode=shared] .bio-person {
  min-width: 0;
  gap: 22px;
}
.bio-card[data-layout-mode=shared] .bio-person :is(h1, h3) {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--bio-shared-ink);
  text-wrap: balance;
}
.bio-card[data-layout-mode=shared] .bio-role {
  font-size: 1rem;
  color: var(--bio-shared-ink);
}
.bio-card[data-layout-mode=shared] :is(.bio-organization, .bio-branch) {
  color: var(--bio-shared-muted);
  font-size: 0.875rem;
}
.bio-card[data-layout-mode=shared] .bio-avatar {
  width: 80px;
  height: 88px;
  flex: 0 0 80px;
  color: var(--bio-shared-ink);
  background: #fff;
  border-radius: 8px;
}
.bio-card[data-layout-mode=shared] .bio-card-body {
  padding: 30px 32px;
  min-width: 0;
}
.bio-card[data-layout-mode=shared] .bio-save-contact {
  background: var(--bio-action, var(--bio-primary));
  color: var(--bio-on-action, var(--bio-on-primary));
  filter: none;
  border-radius: 6px;
}
.bio-card[data-layout-mode=shared] .bio-save-contact:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.bio-card[data-layout-mode=shared] .bio-contact-action {
  background: var(--bio-shared-tint);
  color: var(--bio-shared-ink);
}
.bio-card[data-layout-mode=shared] .bio-contact-action :is(span, strong) {
  color: inherit;
}
.bio-card[data-layout-mode=shared] .bio-contact-action span {
  font-size: 0.8125rem;
}
.bio-card[data-layout-mode=shared] .bio-contact-action strong {
  font-size: 0.9375rem;
}
.bio-card[data-layout-mode=shared] .bio-services li {
  background: var(--bio-shared-tint);
  color: var(--bio-shared-ink);
}
.bio-card[data-layout-mode=shared] :is(a, button):focus-visible {
  outline: 3px solid var(--bio-shared-ink);
  outline-offset: 4px;
}
.bio-card[data-layout-mode=shared] .bio-card-foot,
.bio-card[data-layout-mode=shared] .bio-work-confirmation {
  grid-column: 1 / -1;
}
.bio-card[data-layout=split-panel-v1] {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}
.bio-card[data-layout=split-panel-v1] .bio-card-header {
  padding: 44px 28px;
}
.bio-card[data-layout=split-panel-v1] .bio-bank-identity {
  margin-bottom: 48px;
}
.bio-card[data-layout=split-panel-v1] .bio-person {
  flex-direction: column;
  align-items: flex-start;
}
.bio-card[data-layout=split-panel-v1] .bio-person :is(h1, h3) {
  font-size: 2.3rem;
}
.bio-card[data-layout=split-panel-v1] .bio-card-body {
  padding: 44px 30px;
}
.bio-card[data-layout=split-panel-v1] .bio-contact-actions {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.bio-card[data-layout=split-panel-v1] .bio-contact-action {
  background: transparent;
  border-radius: 0;
  padding: 16px 0;
  border-bottom: 1px solid #d5dee9;
}
.bio-card[data-layout=split-panel-v1] .bio-services ul {
  display: block;
  padding-left: 20px;
  list-style: disc;
}
.bio-card[data-layout=split-panel-v1] .bio-services li {
  background: transparent;
  padding: 0;
  margin-block: 10px;
}
.bio-card[data-layout=centered-v1] .bio-card-header {
  text-align: center;
  padding-block: 40px;
}
.bio-card[data-layout=centered-v1] .bio-bank-identity {
  justify-content: center;
}
.bio-card[data-layout=centered-v1] .bio-bank-identity img {
  object-position: center;
}
.bio-card[data-layout=centered-v1] .bio-person {
  flex-direction: column;
}
.bio-card[data-layout=centered-v1] .bio-avatar {
  width: 104px;
  height: 104px;
  flex-basis: 104px;
  border-radius: 50%;
}
.bio-card[data-layout=centered-v1] .bio-description {
  text-align: center;
}
.bio-card[data-layout=editorial-v1] .bio-card-header {
  background: #fff;
  padding-top: 40px;
}
.bio-card[data-layout=editorial-v1] .bio-person-name {
  flex: 1;
  order: -1;
  padding-top: 20px;
}
.bio-card[data-layout=editorial-v1] .bio-person-name::before {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  margin-bottom: 22px;
  background: var(--bio-primary);
}
.bio-card[data-layout=editorial-v1] .bio-avatar {
  width: 96px;
  height: 120px;
  flex-basis: 96px;
}
.bio-card[data-layout=editorial-v1] .bio-card-body {
  background: var(--bio-shared-tint);
}
.bio-card[data-layout=editorial-v1] .bio-contact-action {
  background: #fff;
}
.bio-card[data-layout=framed-v1] {
  padding: 20px;
}
.bio-card[data-layout=framed-v1] .bio-card-header {
  border-radius: 8px;
  padding: 30px 26px;
}
.bio-card[data-layout=framed-v1] .bio-person {
  flex-direction: column;
  align-items: flex-start;
}
.bio-card[data-layout=framed-v1] .bio-card-body {
  padding: 28px 6px;
}
.bio-card[data-layout=framed-v1] .bio-card-foot {
  padding-inline: 6px;
}
.bio-card[data-layout=signature-v1] .bio-card-header {
  background: #fff;
  padding-block: 42px 32px;
}
.bio-card[data-layout=signature-v1] .bio-person {
  flex-direction: column;
  align-items: flex-start;
}
.bio-card[data-layout=signature-v1] .bio-person :is(h1, h3) {
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.15;
}
.bio-card[data-layout=signature-v1] .bio-avatar {
  width: 64px;
  height: 64px;
  flex-basis: 64px;
  border-radius: 50%;
  background: var(--bio-shared-tint);
}
.bio-card[data-layout=signature-v1] .bio-card-body {
  background: var(--bio-shared-tint);
}
.bio-card[data-layout=ribbon-v1] {
  border-top: 8px solid var(--bio-primary);
}
.bio-card[data-layout=ribbon-v1] .bio-card-header {
  background: #fff;
}
.bio-card[data-layout=ribbon-v1] .bio-bank-identity {
  margin-bottom: 26px;
}
.bio-card[data-layout=ribbon-v1] .bio-person :is(h1, h3) {
  font-size: 1.9rem;
}
.bio-card[data-layout=ribbon-v1] .bio-avatar,
.bio-card[data-layout=editorial-v1] .bio-avatar {
  background: var(--bio-shared-tint);
}
.bio-card[data-layout=ribbon-v1] .bio-card-body {
  padding-top: 12px;
}
.bio-card[data-layout=ribbon-v1] .bio-card-foot {
  background: var(--bio-shared-tint);
}
.bio-card[data-organization=ub-academy] .bio-bank-watermark {
  width: 200px;
  height: 200px;
  right: -72px;
  bottom: 10px;
  opacity: 0.12;
}
@container (max-width: 640px) {
  .bio-card[data-layout=split-panel-v1] > .bio-card-header,
  .bio-card[data-layout=split-panel-v1] > .bio-card-body {
    grid-column: 1 / -1;
  }
  .bio-card[data-layout-mode=shared] .bio-contact-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 680px) {
  .bio-card[data-layout=split-panel-v1] {
    grid-template-columns: minmax(0, 1fr);
  }
  .bio-card[data-layout-mode=shared] .bio-card-header,
  .bio-card[data-layout-mode=shared] .bio-card-body {
    padding: 28px 22px;
  }
  .bio-card[data-layout=split-panel-v1] .bio-bank-identity {
    margin-bottom: 30px;
  }
  .bio-card[data-layout=editorial-v1] .bio-person {
    align-items: flex-start;
    flex-direction: column;
  }
  .bio-card[data-layout=editorial-v1] .bio-person-name {
    order: 0;
    padding-top: 0;
  }
  .bio-card[data-layout=framed-v1] {
    padding: 12px;
  }
  .bio-card[data-layout=framed-v1] .bio-card-header {
    padding-inline: 20px;
  }
  .bio-card[data-layout=framed-v1] .bio-card-body {
    padding-inline: 8px;
  }
  .bio-card[data-layout-mode=shared] .bio-contact-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .bio-card[data-layout=ribbon-v1] .bio-person {
    flex-direction: column;
    align-items: flex-start;
  }
}
@supports (container-type: inline-size) {
  @container public-frame (max-width: 680px) {
    .bio-card[data-layout=split-panel-v1] {
      grid-template-columns: minmax(0, 1fr);
    }
    .bio-card[data-layout-mode=shared] .bio-card-header,
    .bio-card[data-layout-mode=shared] .bio-card-body {
      padding: 28px 22px;
    }
    .bio-card[data-layout=split-panel-v1] .bio-bank-identity {
      margin-bottom: 30px;
    }
    .bio-card[data-layout=editorial-v1] .bio-person {
      align-items: flex-start;
      flex-direction: column;
    }
    .bio-card[data-layout=editorial-v1] .bio-person-name {
      order: 0;
      padding-top: 0;
    }
    .bio-card[data-layout=framed-v1] {
      padding: 12px;
    }
    .bio-card[data-layout=framed-v1] .bio-card-header {
      padding-inline: 20px;
    }
    .bio-card[data-layout=framed-v1] .bio-card-body {
      padding-inline: 8px;
    }
    .bio-card[data-layout-mode=shared] .bio-contact-actions {
      grid-template-columns: minmax(0, 1fr);
    }
    .bio-card[data-layout=ribbon-v1] .bio-person {
      flex-direction: column;
      align-items: flex-start;
    }
  }
}

/* src/payment-editor.css */
.payment-creator-heading .button > svg,
.payment-page-editor .button:where(:not(.preview-page *)) > svg,
.payment-page-editor .text-button:where(:not(.preview-page *)) > svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.payment-page-library {
  margin: 0 0 var(--space-8);
}
.payment-page-library .owned-list-head {
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}
.payment-page-library .owned-list-head:not(:has(> .button:not([hidden]))) {
  margin: 0;
}
.payment-page-library .signin-card {
  margin: 0;
}
.payment-google-mark {
  flex: none;
  width: 14px;
  height: 14px;
}
.payment-page-workspace.payment-creator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-10);
  max-width: none;
  margin-inline: 0;
}
.payment-creator .payment-page-editor {
  --flow-pad: 28px;
  container: payment-editor / inline-size;
  padding: var(--flow-pad) var(--flow-pad) 0;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
}
@media (max-width: 1024px) {
  .payment-page-workspace.payment-creator {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
    gap: var(--space-5);
  }
  .payment-creator .payment-page-editor {
    --flow-pad: 20px;
  }
}
@media (max-width: 820px) {
  .payment-page-workspace.payment-creator {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 480px) {
  .payment-creator .payment-page-editor {
    --flow-pad: 16px;
  }
}
.payment-creator .payment-editor-heading {
  margin: 0;
}
.payment-creator .payment-editor-tabs {
  margin: 0 0 var(--space-4);
}
.payment-creator .form-required-note {
  margin: 0 0 var(--space-5);
}
.payment-draft-status {
  margin: 0 0 var(--space-4);
}
.payment-creator #page-form-error:not([hidden]) {
  margin: 0 0 var(--space-6);
}
.payment-stage-panel > :is(fieldset, .payment-field-group, details.advanced) {
  margin: 0;
}
.payment-stage-panel > :is(fieldset, .payment-field-group, details.advanced) + :is(fieldset, .payment-field-group, details.advanced) {
  margin-top: var(--space-8);
}
.payment-page-editor legend:where(:not(.preview-page *)) {
  margin: 0 0 var(--space-3);
  padding: 0;
  font-size: var(--text-md);
  font-weight: 600;
}
.payment-page-editor :is(.page-amount-mode, .payment-suggestions) > legend {
  margin-bottom: 8px;
  font-size: var(--text-sm);
}
.payment-page-editor .field:where(:not(.preview-page *)):last-child {
  margin-bottom: 0;
}
.page-amount-fields > * + :is(.field, .page-open-fields, fieldset) {
  margin-top: var(--space-4);
}
.page-amount-fields > .field {
  margin-bottom: 0;
}
.page-kind-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
@container payment-editor (max-width: 22.5rem) {
  .page-amount-options {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container payment-editor (max-width: 15rem) {
  .page-kind-options {
    grid-template-columns: minmax(0, 1fr);
  }
}
.page-kind-option {
  position: relative;
  display: flex;
}
.page-kind-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.page-kind-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--input-line);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
.page-kind-option input:checked + span {
  border-color: var(--action);
  background: var(--selection);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--action);
}
.page-kind-option input:focus-visible + span {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.page-kind-option:hover input:not(:checked) + span {
  border-color: var(--muted);
}
.page-reuse-recipient {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border-radius: var(--control-radius);
  background: var(--surface-output);
}
.page-reuse-recipient .payment-reuse-button {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}
.page-reuse-recipient .field-help {
  margin: 0;
}
.page-recipient-fields > .locked-note {
  margin: -4px 0 var(--space-4);
}
#page-fixed-field .input-affix {
  max-width: 20rem;
}
#page-suggestion-rows {
  display: grid;
  gap: var(--space-3);
}
.payment-suggestions > .field-error:not(:empty) {
  margin: 0 0 var(--space-3);
}
.payment-suggestion-row {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr) 44px;
  align-items: center;
  column-gap: var(--space-3);
}
.payment-suggestion-row > .input-affix {
  grid-area: 1 / 1;
}
.payment-suggestion-row > .money-readout {
  grid-area: 1 / 2;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payment-suggestion-row > .money-readout :is(.money-number, span) {
  display: inline;
  white-space: nowrap;
}
.payment-suggestion-row > .money-readout wbr {
  display: none;
}
.payment-suggestion-row > .money-readout .money-number {
  color: var(--ink);
  font-weight: 600;
}
.payment-suggestion-row > .money-readout .money-number::after {
  content: " · ";
  color: var(--muted);
  font-weight: 400;
}
.payment-suggestion-row > .money-readout:is(.is-error, :has(.money-suggestion)) {
  white-space: normal;
}
.payment-suggestion-row > .payment-remove-amount {
  grid-area: 1 / 3;
  color: var(--muted);
}
.payment-suggestion-row > .payment-remove-amount:hover {
  background: var(--error-ground);
  color: var(--error);
}
.payment-remove-amount svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
@container payment-editor (max-width: 22.5rem) {
  .payment-suggestion-row {
    grid-template-columns: minmax(0, 1fr) 44px;
    row-gap: 4px;
  }
  .payment-suggestion-row > .money-readout {
    grid-area: 2 / 1 / 3 / 3;
  }
  .payment-suggestion-row > .payment-remove-amount {
    grid-area: 1 / 2;
  }
}
.payment-add-amount {
  gap: 6px;
  margin-top: 4px;
}
.payment-add-amount > svg {
  width: 18px;
  height: 18px;
}
.payment-suggestions > .field-help {
  margin-top: 0;
}
.page-open-fields > .check {
  margin: var(--space-4) 0 0;
}
.payment-page-editor details.page-extra-details {
  padding: 0;
  border-block: 1px solid var(--line);
}
.payment-page-editor details.page-extra-details > summary {
  padding-block: 12px;
}
.payment-page-editor details.page-extra-details[open] > summary {
  margin-bottom: var(--space-3);
}
.payment-page-editor details.page-extra-details[open] {
  padding-bottom: var(--space-4);
}
.payment-creator .page-appearance {
  margin: 0;
  padding: 0;
  border: 0;
}
.payment-gallery-intro {
  margin: 0 0 var(--space-4);
}
.payment-theme-filters {
  --chip-bleed: var(--flow-pad);
  margin: 0 0 var(--space-5);
}
.payment-creator #page-theme-hidden:not([hidden]) {
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
}
.payment-creator .page-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-4) var(--space-3);
  margin: 0;
}
@container payment-editor (min-width: 40rem) {
  .payment-creator .page-theme-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container payment-editor (max-width: 15rem) {
  .payment-creator .page-theme-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.payment-creator .payment-theme-choice {
  position: relative;
  min-width: 0;
  height: 100%;
}
.payment-creator .page-theme[hidden],
.payment-creator .payment-theme-choice:has(> .page-theme[hidden]) {
  display: none;
}
.payment-creator .page-theme.choice-card {
  width: 100%;
  padding: var(--space-2) var(--space-2) var(--space-3);
}
.payment-creator .payment-theme-reserve {
  display: block;
  min-width: 0;
  aspect-ratio: 1;
}
.payment-theme-thumb {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.payment-creator .payment-theme-choice > .payment-theme-thumb {
  position: absolute;
  inset-block-start: calc(var(--space-2) + 1px);
  inset-inline: calc(var(--space-2) + 1px);
  pointer-events: none;
  z-index: 1;
}
.payment-creator .payment-theme-choice > .page-theme[aria-pressed=true]::after {
  z-index: 2;
}
.payment-creator .payment-theme-cover.donation-page.payment-layout {
  position: absolute;
  inset: 0 auto auto 0;
  width: 390px;
  min-height: 390px;
  container: none;
  border-radius: 0;
  transform: scale(var(--payment-thumb-k, 0.4));
  transform-origin: top left;
  pointer-events: none;
}
.payment-creator .payment-theme-cover.donation-page.payment-layout .donation-layout {
  display: block;
  padding: 24px;
}
.payment-creator .payment-theme-cover.donation-page.payment-layout .donation-story {
  display: block;
  position: static;
  padding: 0;
}
.payment-creator .payment-theme-cover.donation-page.payment-layout .donation-art {
  display: block;
  position: static;
  width: 100%;
  max-width: none;
  margin: 0 0 24px;
}
.payment-creator .payment-theme-cover .donation-art img {
  border-radius: var(--radius-sm);
}
.payment-creator .payment-theme-cover.donation-page.payment-layout .donation-title {
  font-size: 2rem;
}
.payment-creator .payment-theme-cover.donation-page.payment-layout:is(.family-contribution, .family-invitation) .donation-title {
  font-size: 2.75rem;
}
.payment-theme-cover :is(.donation-title, .donation-host, .donation-description) {
  display: block;
}
.payment-theme-example {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}
.page-incomplete {
  margin: 0 0 var(--space-6);
}
.payment-review {
  margin: 0 0 var(--space-8);
  container: review / inline-size;
}
.payment-review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--space-4);
  margin: 0 0 var(--space-2);
}
.payment-review-head h3 {
  margin: 0;
  font-size: var(--text-md);
}
.payment-review .summary-list dd {
  overflow-wrap: anywhere;
}
@container summary (max-width: 12rem) {
  .payment-review .summary-list [data-kind=number] {
    white-space: normal;
  }
}
.payment-slug-field {
  margin: 0 0 var(--space-8);
}
.payment-slug-field.is-locked .input-affix > input:disabled {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}
.payment-slug-field > .locked-note {
  margin-top: 6px;
}
.payment-creator .page-publish-panel {
  margin: 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--line);
}
.page-publish-panel h3 {
  margin: 0 0 6px;
  font-size: var(--text-lg);
}
.page-publish-panel > .field-help:first-of-type {
  margin: 0;
}
.page-publish-panel .check {
  margin: var(--space-4) 0 0;
  font-size: var(--text-md);
}
.page-publish-panel .check + .field-error,
.page-publish-panel .page-search-help {
  margin-inline-start: 25px;
}
.page-publish-panel .page-search-help {
  margin-top: 4px;
}
.page-publish-panel > .notice {
  margin: var(--space-4) 0 0;
}
.payment-creator .publication-security {
  margin: var(--space-6) 0 0;
  padding: 0;
  border: 0;
}
.publication-security h4 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
}
.payment-security-list {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.payment-creator .payment-security-list > li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  border-top: 1px solid var(--line);
}
.payment-security-list > li:first-child {
  border-top: 0;
}
.payment-security-icon {
  display: grid;
  color: var(--muted);
}
.payment-security-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.payment-security-list > li[data-state=done] .payment-security-icon {
  color: var(--success);
}
.payment-security-list > li[data-state=todo] .payment-security-icon {
  color: var(--warning-ink);
}
.payment-security-label {
  min-width: 0;
  font-size: var(--text-sm);
}
.publication-security > .field-help {
  margin: 0;
}
.payment-security-actions {
  margin-top: var(--space-3);
}
.publication-security > .notice {
  margin: var(--space-3) 0 0;
}
.payment-creator .share-panel {
  margin: var(--space-8) 0 0;
}
.share-panel-qr-image > svg {
  display: block;
  width: 100%;
  height: auto;
  stroke: none;
}
.payment-creator .share-panel-body > input[readonly] {
  width: 100%;
  background: var(--ground);
}
.payment-unpublish-block {
  margin: var(--space-6) 0 0;
}
.button[data-confirmed],
.text-button[data-confirmed] {
  color: var(--success);
}
.button.primary[data-confirmed] {
  background: var(--success);
  color: var(--white);
}
.button[data-failed],
.text-button[data-failed] {
  color: var(--error);
}
.button.secondary[data-failed] {
  border-color: var(--error);
}
.button.primary[data-failed] {
  background: var(--error);
  border-color: var(--error);
  color: var(--white);
}
.payment-inline-status.is-error {
  display: block;
  flex-basis: 100%;
  order: 99;
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: var(--error);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
}
.payment-preview-page .preview-page-logo {
  display: block;
  width: clamp(100px, calc(100cqw - 240px), 164px);
  height: auto;
  aspect-ratio: 390.838 / 80;
}
.payment-preview-page .preview-page-lang {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--on-brand-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.payment-bank-glyph {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--muted);
}
.payment-bank-glyph > svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.payment-preview-page:is([data-qr=pending], [data-qr=skeleton]) .donation-page.payment-layout .donation-qr:empty {
  background: var(--white) var(--qr-skeleton-image) center / 86% no-repeat;
}
.payment-preview-page:is([data-qr=pending], [data-qr=skeleton]) .donation-page.payment-layout .donation-qr:empty {
  border-radius: var(--control-radius);
  box-shadow: inset 0 0 0 1px var(--line);
}
.payment-preview-page:is([data-qr=pending], [data-qr=skeleton]) .donation-page.payment-layout .donation-qr:empty::after {
  content: attr(data-skeleton-label);
  width: auto;
  height: auto;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 94%);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.payment-preview-page .donation-page.payment-layout .donation-check-short.payment-qr-pending {
  color: var(--muted);
  font-weight: 400;
}
.payment-preview-page:is([data-state=ready], [data-state=live]) [data-fill=placeholder] {
  opacity: 1;
}
.payment-preview-page:is([data-state=ready], [data-state=live]) .donation-transfer [data-fill=placeholder] dd {
  color: var(--muted);
}
.payment-preview-page:is([data-state=ready], [data-state=live]) .donation-story [data-fill=placeholder] {
  color: var(--theme-muted);
}
@media (prefers-reduced-motion: reduce) {
  .page-kind-option span {
    transition: none;
  }
}
@media (forced-colors: active) {
  .page-kind-option input:checked + span {
    outline: 2px solid Highlight;
  }
  .payment-creator .page-theme.choice-card[aria-pressed=true] {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
  .payment-creator .page-theme.choice-card[aria-pressed=true]::after {
    forced-color-adjust: none;
    background: CanvasText;
    -webkit-mask: var(--icon-check) center / 16px no-repeat;
    mask: var(--icon-check) center / 16px no-repeat;
    box-shadow: none;
  }
  .payment-preview-page:is([data-qr=pending], [data-qr=skeleton]) .donation-page.payment-layout .donation-qr:empty {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }
}
@container flow (max-width: 36rem) {
  #page-actions .label-long {
    display: none;
  }
  #page-actions .label-short {
    display: inline;
  }
}
#page-actions:has(> #page-save[hidden]):has(> #page-publish[hidden]) > #page-save-state:not([hidden]) {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  text-wrap: balance;
}

/* src/editor-tabs.css */
:is(.bio-tabs, .payment-editor-tabs) {
  align-items: stretch;
}
:is(.bio-tabs, .payment-editor-tabs) button {
  min-width: 0;
  padding: 8px 6px;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  :is(.bio-tabs, .payment-editor-tabs) button {
    padding-inline: 4px;
  }
}

/* src/creation-flow.css */
.creation-flow-nav:is(.bio-tabs, .payment-editor-tabs) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 12px;
}
.creation-flow-nav:has(> button:nth-child(4)) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.creation-flow-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.5;
}
.creation-flow-step-number {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  font-variant-numeric: tabular-nums;
  border-radius: 50%;
  background: var(--white);
  color: var(--muted);
}
[aria-current=step] > .creation-flow-step-number {
  background: var(--action);
  color: var(--white);
}
.creation-flow-progress {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: var(--text-sm);
}
.creation-flow-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}
.creation-flow-actions > :only-child {
  margin-inline-start: auto;
}
.creation-flow-actions[data-sticky-bar] {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  min-height: 68px;
  margin: var(--space-6) calc(-1 * var(--flow-pad, 28px)) 0;
  padding: calc(var(--space-3) - 1px) var(--flow-pad, 28px) max(var(--space-3), env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  container: flow / inline-size;
}
.creation-flow-actions[data-sticky-bar] .button {
  white-space: nowrap;
}
.creation-flow-actions .flow-spacer {
  margin-inline-start: auto;
}
.creation-flow-actions .flow-back {
  padding-inline: 10px 14px;
}
.creation-flow-actions .flow-back svg {
  width: 20px;
  height: 20px;
}
.label-short {
  display: none;
}
@container flow (max-width: 30rem) {
  .creation-flow-actions .flow-back {
    padding-inline: 10px;
  }
  .creation-flow-actions .flow-back-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .creation-flow-actions .label-long {
    display: none;
  }
  .creation-flow-actions .label-short {
    display: inline;
  }
}
.creation-flow-actions[data-sticky-bar].is-stuck {
  box-shadow: var(--shadow-up);
}
.creation-flow-actions[data-sticky-bar].is-tall {
  position: static;
  flex-wrap: wrap;
}
[data-sticky-sentinel] {
  height: 1px;
  margin-top: -1px;
  pointer-events: none;
}
.save-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
  white-space: nowrap;
}
.save-state::before {
  content: none;
  flex: none;
}
.save-state[data-state=saved]::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: var(--success);
  -webkit-mask: var(--icon-check) center / 16px no-repeat;
  mask: var(--icon-check) center / 16px no-repeat;
  forced-color-adjust: none;
}
.save-state[data-state=unsaved]::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-inline: 4px 2px;
  border-radius: 50%;
  background: var(--warning-ink);
}
.save-state[data-state=saving]::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: busy-turn 0.8s linear infinite;
}
.creation-flow-actions.is-crowded > .save-state {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (forced-colors: active) {
  .save-state:is([data-state=saved], [data-state=unsaved])::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}
.form-required-note {
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font-size: var(--text-xs);
}
@media (max-width: 640px) {
  .creation-flow-nav:has(> button:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .creation-flow-nav:not(:has(> button:nth-child(4))) button {
    flex-direction: column;
    gap: 4px;
  }
}
:is(.bio-editor, .payment-page-editor) {
  container-type: inline-size;
}
.creation-flow-nav button > span:last-child {
  overflow-wrap: normal;
  word-break: normal;
}
@container (max-width: 15em) {
  .bio-editor .creation-flow-nav.bio-tabs,
  .payment-page-editor .creation-flow-nav.payment-editor-tabs {
    grid-template-columns: minmax(0, 1fr);
  }
  .bio-editor .creation-flow-nav.bio-tabs button,
  .payment-page-editor .creation-flow-nav.payment-editor-tabs button {
    flex-direction: row;
  }
}

/* src/payment-themes.css */
.donation-page.payment-layout {
  --theme-ground: #f1f4f8;
  --theme-ink: #15334d;
  --theme-muted: #42586d;
  --theme-accent: #174a78;
  display: block;
  container: payment-landing / inline-size;
  width: 100%;
  padding: 0;
  border-radius: 12px;
  background: var(--theme-ground);
  color: var(--theme-ink);
  overflow: clip;
  transition: none;
}
.donation-page.payment-layout .donation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.94fr);
  align-items: start;
  gap: 40px;
  padding: 40px;
}
.donation-page.payment-layout .donation-story {
  min-width: 0;
  padding: 0;
  border: 0;
  container-type: normal;
}
.donation-page.payment-layout .donation-art {
  width: 100%;
  margin: 0 0 24px;
}
.donation-page.payment-layout .donation-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 3;
  object-fit: contain;
}
.donation-page.payment-layout .donation-title {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 2.5rem;
  line-height: 1.18;
  letter-spacing: -0.025em;
  max-width: 20ch;
  margin: 0 0 12px;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.donation-page.payment-layout .donation-host {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--theme-ink);
  overflow-wrap: anywhere;
}
.donation-page.payment-layout .donation-date {
  color: var(--theme-muted);
  margin: 0 0 24px;
  font-size: 0.9375rem;
}
.donation-page.payment-layout .donation-description {
  margin: 18px 0 0;
  color: var(--theme-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 52ch;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.donation-page.payment-layout .donation-description:empty {
  display: none;
}
.donation-page.payment-layout .donation-transfer {
  border: 0;
  border-block-start: 3px solid var(--theme-accent);
  border-radius: 8px;
  padding: 28px;
  background: #fff;
  color: #182b42;
  min-width: 0;
  width: 100%;
  box-shadow: none;
}
.donation-page.payment-layout .donation-recipient-heading {
  margin: 0 0 16px;
  font-size: 1.125rem;
  line-height: 1.5;
}
.donation-page.payment-layout .donation-bank {
  min-height: 40px;
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.donation-page.payment-layout .donation-recipient {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
}
.donation-page.payment-layout .donation-recipient dt {
  color: #52647a;
}
.donation-page.payment-layout .donation-recipient dd {
  min-height: 1.5em;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.donation-page.payment-layout .donation-fixed-row {
  padding-top: 8px;
}
.donation-page.payment-layout .donation-recipient .donation-fixed-amount {
  font-size: clamp(1.25rem, 4cqi, 1.75rem);
  line-height: 1.3;
  margin-bottom: 0;
  color: var(--theme-accent);
}
.donation-page.payment-layout .donation-payment-controls {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.donation-page.payment-layout .donation-qr {
  width: min(100%, 264px);
  aspect-ratio: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 16px auto;
  background: #fff;
  contain: layout;
  scroll-margin-block: 24px;
}
.donation-page.payment-layout .donation-qr:empty::after {
  content: "";
  width: 68%;
  height: 68%;
  border-radius: 8px;
  background: #f1f4f8;
}
.donation-page.payment-layout .donation-qr > svg,
.donation-page.payment-layout .donation-qr > img {
  width: 100%;
  height: auto;
  display: block;
}
.donation-page.payment-layout .donation-qr > img {
  -webkit-touch-callout: default;
}
.donation-page.payment-layout .donation-qr-status {
  min-height: 2.8em;
  margin-bottom: 16px;
}
.donation-page.payment-layout .donation-current-amount {
  text-align: center;
}
.donation-page.payment-layout .donation-amount-words {
  text-align: center;
  margin-block: 8px;
}
.donation-page.payment-layout .donation-primary .button.primary:not(:disabled) {
  background: var(--theme-accent);
  border-color: var(--theme-accent);
  color: #fff;
}
.donation-page.payment-layout .donation-amount-chip[aria-pressed=true] {
  background: var(--theme-accent);
  color: #fff;
  border-color: var(--theme-accent);
}
.donation-page.payment-layout .donation-copy-actions .text-button {
  min-height: 44px;
}
.donation-page.payment-layout .donation-bank-check {
  border-top: 0;
  margin-top: 20px;
  padding-top: 0;
}
.donation-page.payment-layout.family-request .donation-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
.donation-page.payment-layout.family-request .donation-story {
  position: relative;
  padding-right: 30%;
}
.donation-page.payment-layout.family-request .donation-art {
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;
}
.donation-page.payment-layout.family-request .donation-title {
  font-size: 2.25rem;
  max-width: 28ch;
}
.donation-page.payment-layout.family-contribution .donation-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 3.75rem;
  font-weight: 600;
}
.donation-page.payment-layout.family-contribution .donation-story {
  padding: 16px 0;
}
.donation-page.payment-layout.family-contribution .donation-art {
  margin-bottom: 24px;
}
.donation-page.payment-layout.family-contribution .donation-transfer {
  border-radius: 16px 16px 8px 8px;
}
.donation-page.payment-layout.family-merchant .donation-layout {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  gap: 0;
}
.donation-page.payment-layout.family-merchant .donation-story {
  position: relative;
  padding: 40px 40% 40px 40px;
}
.donation-page.payment-layout.family-merchant .donation-art {
  position: absolute;
  inset: 32px 24px auto auto;
  width: 32%;
}
.donation-page.payment-layout.family-merchant .donation-title {
  max-width: 24ch;
}
.donation-page.payment-layout.family-merchant .donation-transfer {
  border-radius: 0;
  padding: 40px;
}
.donation-page.payment-layout.family-invitation .donation-story {
  text-align: center;
  padding: 16px 8px 32px;
}
.donation-page.payment-layout.family-invitation .donation-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 3.75rem;
  margin-inline: auto;
}
.donation-page.payment-layout.family-invitation .donation-description {
  margin-inline: auto;
}
.donation-page.payment-layout.family-invitation .donation-art {
  max-width: 440px;
  margin-inline: auto;
}
.donation-page.payment-layout.family-invitation .donation-transfer {
  border-radius: 0;
}
.donation-page.payment-layout.family-announcement .donation-layout {
  padding: 0;
  gap: 0;
}
.donation-page.payment-layout.family-announcement .donation-story {
  padding: 40px;
}
.donation-page.payment-layout.family-announcement .donation-title {
  font-size: 3rem;
}
.donation-page.payment-layout.family-announcement .donation-transfer {
  border-radius: 0;
  margin: 24px 24px 24px 0;
  width: auto;
}
.donation-page.payment-layout.family-announcement .donation-art {
  margin-bottom: 24px;
}
.donation-page.payment-layout.family-gathering .donation-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.donation-page.payment-layout.family-gathering .donation-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  column-gap: 32px;
}
.donation-page.payment-layout.family-gathering .donation-art {
  grid-column: 2;
  grid-row: 1 / 5;
  align-self: center;
  margin: 0;
}
.donation-page.payment-layout.family-gathering .donation-title,
.donation-page.payment-layout.family-gathering .donation-host,
.donation-page.payment-layout.family-gathering .donation-date,
.donation-page.payment-layout.family-gathering .donation-description {
  grid-column: 1;
}
.donation-page.payment-layout.family-gathering .donation-transfer {
  max-width: 640px;
  margin-inline: auto;
}
.donation-page.payment-layout.family-gathering .donation-title {
  font-size: 2.75rem;
}
.donation-page.payment-layout.theme-coffee {
  --theme-ground: #f4e8d7;
  --theme-ink: #422a20;
  --theme-muted: #6d5143;
  --theme-accent: #75432c;
}
.donation-page.payment-layout.theme-classroom {
  --theme-ground: #edf2e5;
  --theme-ink: #263d2d;
  --theme-muted: #485c48;
  --theme-accent: #365c3d;
}
.donation-page.payment-layout.theme-community {
  --theme-ground: #e2eee9;
  --theme-ink: #173f39;
  --theme-muted: #3b5e57;
  --theme-accent: #186259;
}
.donation-page.payment-layout.theme-community .donation-title {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 2.5rem;
}
.donation-page.payment-layout.theme-merchant {
  --theme-ground: #163f61;
  --theme-ink: #fff;
  --theme-muted: #d2e3ee;
  --theme-accent: #16496f;
}
.donation-page.payment-layout.theme-local-specialty {
  --theme-ground: #efe7cf;
  --theme-ink: #3b4427;
  --theme-muted: #5b6044;
  --theme-accent: #526333;
}
.donation-page.payment-layout.theme-local-specialty .donation-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 3.25rem;
}
.donation-page.payment-layout.theme-wedding {
  --theme-ground: #f6ece9;
  --theme-ink: #622f40;
  --theme-muted: #795564;
  --theme-accent: #7c3c53;
}
.donation-page.payment-layout.theme-celebration {
  --theme-ground: #18354a;
  --theme-ink: #fff5dc;
  --theme-muted: #e4d3b5;
  --theme-accent: #77521b;
}
.donation-page.payment-layout.theme-housewarming {
  --theme-ground: #e9ece1;
  --theme-ink: #364639;
  --theme-muted: #566650;
  --theme-accent: #49643e;
}
.donation-page.payment-layout.theme-housewarming .donation-title {
  font-size: 3.25rem;
}
.donation-page.payment-layout.theme-birthday {
  --theme-ground: #f8dcae;
  --theme-ink: #553049;
  --theme-muted: #705168;
  --theme-accent: #75405c;
}
.donation-page.payment-layout.theme-newborn {
  --theme-ground: #e9eef5;
  --theme-ink: #38496b;
  --theme-muted: #596882;
  --theme-accent: #4c6090;
}
.donation-page.payment-layout.theme-newborn .donation-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 3.5rem;
}
.donation-page.payment-layout.theme-graduation {
  --theme-ground: #293c5c;
  --theme-ink: #fff5df;
  --theme-muted: #d6dfed;
  --theme-accent: #354d73;
}
.donation-page.payment-layout.theme-graduation .donation-title {
  font-size: 2.75rem;
}
.donation-page.payment-layout.theme-playful {
  --theme-ground: #ffddd5;
  --theme-ink: #3e315f;
  --theme-muted: #655170;
  --theme-accent: #5c3d78;
}
.donation-page.payment-layout.theme-reunion {
  --theme-ground: #f1e6dc;
  --theme-ink: #57362b;
  --theme-muted: #755a49;
  --theme-accent: #80513b;
}
.donation-page.payment-layout.theme-reunion .donation-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 3.5rem;
}
.donation-page.payment-layout.theme-club {
  --theme-ground: #e2ecd9;
  --theme-ink: #253e33;
  --theme-muted: #4d6255;
  --theme-accent: #315f48;
}
.donation-page.payment-layout.theme-club .donation-art {
  transform: rotate(-3deg);
}
.donation-page.payment-layout.theme-event {
  --theme-ground: #deddf4;
  --theme-ink: #36265b;
  --theme-muted: #5d5176;
  --theme-accent: #593c88;
}
.donation-page.payment-layout.theme-event .donation-title {
  font-size: 3.25rem;
}
.donation-page.payment-layout.theme-deposit {
  --theme-ground: #e8eef6;
  --theme-ink: #19364f;
  --theme-muted: #435970;
  --theme-accent: #315675;
}
.donation-page.payment-layout.theme-creator {
  --theme-ground: #eee7f7;
  --theme-ink: #302046;
  --theme-muted: #594a6b;
  --theme-accent: #644586;
}
.donation-page.payment-layout.theme-market {
  --theme-ground: #f7e3cb;
  --theme-ink: #542a22;
  --theme-muted: #6e473c;
  --theme-accent: #883d2e;
}
.donation-page.payment-layout.theme-engagement {
  --theme-ground: #f6ebd4;
  --theme-ink: #573821;
  --theme-muted: #6c513c;
  --theme-accent: #805224;
}
.donation-page.payment-layout.theme-tet {
  --theme-ground: #742c29;
  --theme-ink: #fff1d6;
  --theme-muted: #f6d9b3;
  --theme-accent: #9c352d;
}
.donation-page.payment-layout.theme-tet .donation-title {
  font-family: "Cormorant Garamond", serif;
}
.donation-page.payment-layout.theme-workshop {
  --theme-ground: #f0e4cf;
  --theme-ink: #3a342a;
  --theme-muted: #625246;
  --theme-accent: #7c4735;
}
@container payment-landing (max-width: 44rem) {
  .donation-page.payment-layout .donation-layout,
  .donation-page.payment-layout.family-request .donation-layout,
  .donation-page.payment-layout.family-gathering .donation-layout,
  .donation-page.payment-layout.family-merchant .donation-layout,
  .donation-page.payment-layout.family-announcement .donation-layout {
    display: block;
    padding: 24px;
  }
  .donation-page.payment-layout .donation-story,
  .donation-page.payment-layout.family-request .donation-story,
  .donation-page.payment-layout.family-merchant .donation-story,
  .donation-page.payment-layout.family-gathering .donation-story,
  .donation-page.payment-layout.family-announcement .donation-story {
    display: block;
    padding: 0 0 20px;
    position: static;
  }
  .donation-page.payment-layout .donation-art,
  .donation-page.payment-layout.family-request .donation-art,
  .donation-page.payment-layout.family-merchant .donation-art,
  .donation-page.payment-layout.family-gathering .donation-art {
    position: static;
    width: 100%;
    max-width: 340px;
    margin: 0 0 16px;
  }
  .donation-page.payment-layout.family-invitation .donation-art {
    margin-inline: auto;
  }
  .donation-page.payment-layout .donation-title,
  .donation-page.payment-layout.family-request .donation-title,
  .donation-page.payment-layout.family-contribution .donation-title,
  .donation-page.payment-layout.family-invitation .donation-title,
  .donation-page.payment-layout.family-announcement .donation-title,
  .donation-page.payment-layout.family-gathering .donation-title {
    font-size: 2rem;
    max-width: 28ch;
  }
  .donation-page.payment-layout.family-invitation .donation-title,
  .donation-page.payment-layout.theme-coffee .donation-title,
  .donation-page.payment-layout.theme-reunion .donation-title,
  .donation-page.payment-layout.theme-newborn .donation-title {
    font-size: 2.75rem;
  }
  .donation-page.payment-layout .donation-transfer,
  .donation-page.payment-layout.family-request .donation-transfer,
  .donation-page.payment-layout.family-merchant .donation-transfer,
  .donation-page.payment-layout.family-announcement .donation-transfer {
    display: block;
    margin: 0;
    padding: 24px;
    width: 100%;
  }
}
@container payment-landing (max-width: 22rem) {
  .donation-page.payment-layout .donation-layout,
  .donation-page.payment-layout.family-request .donation-layout,
  .donation-page.payment-layout.family-gathering .donation-layout,
  .donation-page.payment-layout.family-merchant .donation-layout,
  .donation-page.payment-layout.family-announcement .donation-layout {
    padding: 16px;
  }
  .donation-page.payment-layout .donation-transfer,
  .donation-page.payment-layout.family-request .donation-transfer,
  .donation-page.payment-layout.family-merchant .donation-transfer,
  .donation-page.payment-layout.family-announcement .donation-transfer {
    padding: 16px;
  }
  .donation-page.payment-layout .donation-title,
  .donation-page.payment-layout.family-request .donation-title,
  .donation-page.payment-layout.family-contribution .donation-title,
  .donation-page.payment-layout.family-invitation .donation-title,
  .donation-page.payment-layout.family-announcement .donation-title,
  .donation-page.payment-layout.family-gathering .donation-title {
    font-size: 1.75rem;
  }
  .donation-page.payment-layout .donation-art {
    max-width: 280px;
  }
}

/* src/payment-themes-actions.css */
.donation-page.payment-layout .donation-amounts {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.donation-page.payment-layout .donation-amounts > legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}
.donation-page.payment-layout .donation-amount-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin: 0;
}
.donation-page.payment-layout .donation-custom {
  display: grid;
  gap: 4px;
  flex: 1 1 8rem;
  min-width: min(8rem, 100%);
}
.donation-page.payment-layout .donation-custom > input {
  width: 100%;
  margin: 0;
}
.donation-page.payment-layout .donation-custom > .money-readout {
  margin: 0;
  font-size: var(--text-xs);
}
.donation-page.payment-layout .donation-custom > input:not([aria-invalid=true]) ~ .money-readout {
  display: none;
}
.donation-page.payment-layout .donation-custom > input[aria-invalid=true] ~ .money-readout {
  color: var(--error);
}
.donation-page.payment-layout .donation-pay {
  container: payment-controls / inline-size;
  min-width: 0;
  margin-top: 20px;
}
.donation-page.payment-layout .donation-qr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 12px;
  margin: 0 0 16px;
}
.donation-page.payment-layout .donation-qr-row > .donation-qr {
  width: min(280px, 72vw, 100%);
  margin: 0;
}
.donation-page.payment-layout .donation-qr-side {
  display: grid;
  gap: 4px;
  justify-items: center;
  width: 100%;
  min-width: 0;
  text-align: center;
}
@container payment-controls (min-width: 30rem) {
  .donation-page.payment-layout .donation-qr-row {
    grid-template-columns: clamp(13rem, 42%, 15rem) minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    column-gap: 20px;
  }
  .donation-page.payment-layout .donation-qr-row > .donation-qr {
    width: 100%;
  }
  .donation-page.payment-layout .donation-qr-side {
    justify-items: start;
    text-align: start;
  }
}
.donation-page.payment-layout .donation-qr-side :is(.donation-current-amount, .donation-amount-words) {
  text-align: inherit;
}
.donation-page.payment-layout .donation-qr-side .donation-current-amount {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.donation-page.payment-layout .donation-qr-side .donation-amount-words {
  margin: 0;
}
.donation-page.payment-layout .donation-qr-status {
  min-height: 0;
  margin: 0;
}
.donation-page.payment-layout .donation-qr-status.is-ready {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.donation-page.payment-layout .donation-check-short {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--leading-snug);
  overflow-wrap: break-word;
}
.donation-page.payment-layout .donation-pay > .button.secondary {
  display: flex;
  margin: 0 auto 12px;
}
.donation-page.payment-layout .donation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.donation-page.payment-layout .donation-actions > :is(.donation-primary, .donation-image-actions) {
  flex: 1 1 14rem;
  min-width: 0;
}
.donation-page.payment-layout .donation-actions > .donation-image-actions:not(:has(> .button:not([hidden]))) {
  display: none;
}
.donation-page.payment-layout .donation-actions > .copy-support-hint {
  flex-basis: 100%;
  margin: 0;
}
.donation-page.payment-layout .donation-primary {
  display: grid;
}
.donation-page.payment-layout .donation-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.donation-page.payment-layout .donation-image-actions > .button {
  flex: 1 1 10rem;
}
.donation-page.payment-layout :is(.donation-primary, .donation-image-actions, .donation-app-slot) > .button {
  width: 100%;
  min-height: 48px;
  font-size: var(--text-md);
}
.donation-page.payment-layout .donation-bank-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.5;
}
.donation-page.payment-layout .donation-bank-check::before {
  content: "";
  flex: none;
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.05em;
  background-color: currentColor;
  -webkit-mask: var(--icon-info) center / 100% no-repeat;
  mask: var(--icon-info) center / 100% no-repeat;
  forced-color-adjust: none;
}
.donation-page.payment-layout .donation-scan-help {
  margin: 6px 0 0;
  padding-inline-start: calc(1.25em + 8px);
  font-size: var(--text-xs);
}
.donation-page.payment-layout .donation-recipient > div[data-copy-row] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
}
.donation-page.payment-layout .donation-recipient > div[data-copy-row][hidden] {
  display: none;
}
.donation-page.payment-layout .donation-recipient > div[data-copy-row] > dt {
  flex: 0 0 100%;
}
.donation-page.payment-layout .donation-recipient > div[data-copy-row] > dd[data-payment-field] {
  flex: 0 1 auto;
  max-width: 100%;
  overflow-wrap: break-word;
}
.donation-page.payment-layout .donation-copy-cell {
  display: contents;
}
.donation-page.payment-layout .donation-copy {
  margin-block: -10px;
  color: var(--theme-accent);
}
.donation-page.payment-layout .donation-copy > svg {
  width: 1.25rem;
  height: 1.25rem;
}
.donation-page.payment-layout .donation-copy > svg + svg {
  display: none;
}
.donation-page.payment-layout .donation-copy[data-confirmed] {
  color: var(--success);
}
.donation-page.payment-layout .donation-copy[data-confirmed] > svg:first-child {
  display: none;
}
.donation-page.payment-layout .donation-copy[data-confirmed] > svg + svg {
  display: block;
}
.donation-page.payment-layout .donation-copy[data-failed] {
  color: var(--error);
}
.donation-page.payment-layout .donation-copy:disabled {
  color: var(--disabled-ink);
}
.donation-page.payment-layout .donation-transfer {
  container: payment-transfer / inline-size;
}
@container payment-transfer (min-width: 34rem) {
  .donation-page.payment-layout .donation-identity {
    display: grid;
    grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
    grid-template-areas: "heading heading" "bank rows";
    column-gap: 32px;
    align-items: start;
  }
  .donation-page.payment-layout .donation-recipient-heading {
    grid-area: heading;
  }
  .donation-page.payment-layout .donation-bank {
    grid-area: bank;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 0;
  }
  .donation-page.payment-layout .donation-recipient {
    grid-area: rows;
  }
  .donation-page.payment-layout .donation-payment-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(13rem, 40%, 15rem);
    grid-template-rows: auto 1fr;
    grid-template-areas: "amounts qr" "side qr" "retry retry" "actions actions" "check check" "help help" "app app";
    column-gap: 32px;
  }
  .donation-page.payment-layout :is(.donation-pay, .donation-qr-row) {
    display: contents;
  }
  .donation-page.payment-layout .donation-amounts {
    grid-area: amounts;
  }
  .donation-page.payment-layout .donation-qr-row > .donation-qr {
    grid-area: qr;
    align-self: start;
    width: 100%;
  }
  .donation-page.payment-layout .donation-qr-side {
    grid-area: side;
    align-self: start;
    justify-items: start;
    margin-top: 16px;
    text-align: start;
  }
  .donation-page.payment-layout .donation-pay > .button.secondary {
    grid-area: retry;
    margin: 12px auto 0;
  }
  .donation-page.payment-layout .donation-actions {
    grid-area: actions;
    margin-top: 20px;
  }
  .donation-page.payment-layout .donation-bank-check {
    grid-area: check;
  }
  .donation-page.payment-layout .donation-scan-help {
    grid-area: help;
  }
  .donation-page.payment-layout .donation-app-slot {
    grid-area: app;
  }
}
@container payment-landing (min-width: 60rem) {
  .donation-page.payment-layout:not(.family-request):not(.family-merchant):not(.family-gathering) .donation-layout {
    grid-template-columns: minmax(0, 3fr) minmax(min(37.5rem, 100%), 7fr);
  }
}
@container payment-landing (min-width: 60rem) and (max-width: 71.99rem) {
  .donation-page.payment-layout:is(.family-contribution, .family-invitation, .family-announcement) .donation-title {
    font-size: 2.5rem;
  }
}
@container payment-landing (min-width: 60rem) {
  .donation-page.payment-layout.family-gathering .donation-transfer {
    max-width: 60rem;
  }
  .donation-page.payment-layout:is(.family-request, .family-merchant, .family-gathering) .donation-transfer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    grid-template-rows: auto 1fr;
    grid-template-areas: "identity pay" "amounts pay";
    column-gap: 40px;
    align-items: start;
  }
  .donation-page.payment-layout:is(.family-request, .family-merchant, .family-gathering) .donation-identity {
    display: block;
    grid-area: identity;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
  }
  .donation-page.payment-layout:is(.family-request, .family-merchant, .family-gathering) .donation-bank {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
  }
  .donation-page.payment-layout:is(.family-request, .family-merchant, .family-gathering) .donation-payment-controls {
    display: contents;
  }
  .donation-page.payment-layout:is(.family-request, .family-merchant, .family-gathering) .donation-transfer:has(.donation-amounts[hidden]) .donation-identity {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .donation-page.payment-layout:is(.family-request, .family-merchant, .family-gathering) .donation-amounts {
    grid-area: amounts;
    margin-top: 20px;
  }
  .donation-page.payment-layout:is(.family-request, .family-merchant, .family-gathering):has([data-payment-note][hidden]) .donation-custom {
    flex-basis: 100%;
  }
  .donation-page.payment-layout:is(.family-request, .family-merchant, .family-gathering) .donation-pay {
    display: block;
    grid-area: pay;
    margin-top: 0;
  }
  .donation-page.payment-layout:is(.family-request, .family-merchant, .family-gathering) .donation-qr-row {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
  }
  .donation-page.payment-layout:is(.family-request, .family-merchant, .family-gathering) :is(.donation-qr-row > .donation-qr, .donation-qr-side, .donation-pay > .button.secondary, .donation-actions, .donation-bank-check, .donation-scan-help, .donation-app-slot) {
    grid-area: auto;
  }
  .donation-page.payment-layout:is(.family-request, .family-merchant, .family-gathering) .donation-qr-side {
    align-self: center;
    margin-top: 0;
  }
  .donation-page.payment-layout:is(.family-request, .family-merchant, .family-gathering) .donation-pay > .button.secondary {
    margin: 0 auto 12px;
  }
  .donation-page.payment-layout:is(.family-request, .family-merchant, .family-gathering) .donation-actions {
    margin-top: 0;
  }
}
@container payment-landing (max-width: 44rem) {
  .donation-page.payment-layout .donation-layout,
  .donation-page.payment-layout.family-request .donation-layout,
  .donation-page.payment-layout.family-gathering .donation-layout,
  .donation-page.payment-layout.family-merchant .donation-layout,
  .donation-page.payment-layout.family-announcement .donation-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px;
  }
  .donation-page.payment-layout .donation-story,
  .donation-page.payment-layout.family-request .donation-story,
  .donation-page.payment-layout.family-merchant .donation-story,
  .donation-page.payment-layout.family-gathering .donation-story,
  .donation-page.payment-layout.family-announcement .donation-story,
  .donation-page.payment-layout.family-contribution .donation-story,
  .donation-page.payment-layout.family-invitation .donation-story {
    display: contents;
  }
  .donation-page.payment-layout .donation-art,
  .donation-page.payment-layout.family-request .donation-art,
  .donation-page.payment-layout.family-merchant .donation-art,
  .donation-page.payment-layout.family-gathering .donation-art {
    display: none;
  }
  .donation-page.payment-layout .donation-title,
  .donation-page.payment-layout.family-request .donation-title,
  .donation-page.payment-layout.family-contribution .donation-title,
  .donation-page.payment-layout.family-invitation .donation-title,
  .donation-page.payment-layout.family-announcement .donation-title,
  .donation-page.payment-layout.family-gathering .donation-title,
  .donation-page.payment-layout.theme-coffee .donation-title,
  .donation-page.payment-layout.theme-reunion .donation-title,
  .donation-page.payment-layout.theme-newborn .donation-title {
    order: 0;
    font-size: 1.625rem;
    line-height: 1.2;
    margin: 0 0 4px;
  }
  .donation-page.payment-layout .donation-host,
  .donation-page.payment-layout .donation-date {
    order: 0;
    margin: 0 0 10px;
  }
  .donation-page.payment-layout.family-invitation .donation-story {
    text-align: start;
  }
  .donation-page.payment-layout.family-invitation :is(.donation-title, .donation-description) {
    margin-inline: 0;
  }
  .donation-page.payment-layout .donation-demo-recipient {
    order: 0;
    margin: 0 0 12px;
  }
  .donation-page.payment-layout .donation-transfer,
  .donation-page.payment-layout.family-request .donation-transfer,
  .donation-page.payment-layout.family-merchant .donation-transfer,
  .donation-page.payment-layout.family-announcement .donation-transfer {
    order: 1;
    padding: 16px;
  }
  .donation-page.payment-layout .donation-description {
    order: 2;
    margin: 20px 0 0;
  }
  .donation-page.payment-layout .donation-recipient-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .donation-page.payment-layout .donation-bank {
    min-height: 0;
    margin: 0 0 8px;
    align-items: center;
    gap: 8px;
  }
  .donation-page.payment-layout .donation-bank .bank-logo {
    width: 64px;
    height: 26px;
  }
  .donation-page.payment-layout .donation-recipient {
    gap: 8px;
    margin: 0;
  }
  .donation-page.payment-layout .donation-recipient dt {
    font-size: var(--text-xs);
  }
  .donation-page.payment-layout .donation-recipient dd {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
  }
  .donation-page.payment-layout .donation-payment-controls,
  .donation-page.payment-layout.family-request .donation-payment-controls,
  .donation-page.payment-layout.family-merchant .donation-payment-controls {
    margin-top: 16px;
    padding-top: 16px;
  }
  .donation-page.payment-layout .donation-amount-chip {
    padding: 8px 12px;
  }
  .donation-page.payment-layout .donation-amounts > legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .donation-page.payment-layout .donation-pay {
    margin-top: 16px;
  }
}
@media (forced-colors: active) {
  .donation-page.payment-layout .donation-amount-chip[aria-pressed=true] {
    outline: 2px solid Highlight;
  }
  .donation-page.payment-layout .donation-bank-check::before {
    background-color: CanvasText;
  }
}
@supports (container-type: inline-size) {
  @container public-frame (min-width: 389px) {
    .donation-page.payment-layout .donation-qr-row > .donation-qr {
      width: min(280px, 100%);
    }
  }
}

/* src/payment-themes-handoff.css */
body[data-page=coffee] .shell-signin,
body[data-page=coffee] .shell-member,
body[data-page=coffee] .shell-menu-toggle,
body[data-page=coffee] .site-header .shell-menu-panel,
body[data-page=coffee] .shell-session-error,
body:is([data-page=coffee], [data-page=payment-landing], [data-page=handoff]) .site-footer :is(.footer-group-product, .footer-group-learn, .footer-tagline),
body[data-page=payment-landing] .shell-signin,
body[data-page=payment-landing] .shell-member,
body[data-page=payment-landing] .shell-menu-toggle,
body[data-page=payment-landing] .site-header .shell-menu-panel,
body[data-page=payment-landing] .shell-session-error,
body[data-page=handoff] .shell-signin,
body[data-page=handoff] .shell-member,
body[data-page=handoff] .shell-menu-toggle,
body[data-page=handoff] .site-header .shell-menu-panel,
body[data-page=handoff] .shell-session-error,
body[data-page=handoff] .main-nav,
body[data-page=handoff] .header-help {
  display: none !important;
}
body[data-page=handoff] .header-utilities {
  margin-left: auto;
}
body:is([data-page=payment-landing], [data-page=coffee], [data-page=handoff]) .main-content {
  padding-top: var(--space-6);
}
body:is([data-page=payment-landing], [data-page=coffee]) .site-footer .footer-inner {
  padding-block: var(--space-5);
}
body:is([data-page=payment-landing], [data-page=coffee]) .site-footer .footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-8);
}
body:is([data-page=payment-landing], [data-page=coffee]) .site-footer .footer-about {
  display: block;
}
body:is([data-page=payment-landing], [data-page=coffee]) .site-footer .footer-brand .brand-lockup {
  width: 112px;
}
body:is([data-page=payment-landing], [data-page=coffee]) .site-footer .footer-nav {
  display: block;
  flex: 1 1 14rem;
  min-width: 0;
}
body:is([data-page=payment-landing], [data-page=coffee]) .site-footer .footer-group-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
}
body:is([data-page=payment-landing], [data-page=coffee]) .site-footer .footer-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
body:is([data-page=payment-landing], [data-page=coffee]) .site-footer .footer-bottom,
body[data-page=coffee] .site-footer .footer-donate {
  display: none;
}
@media (max-width: 640px) {
  body:is([data-page=payment-landing], [data-page=coffee]) .site-footer .footer-top {
    align-items: flex-start;
    gap: 0 var(--space-4);
  }
  body:is([data-page=payment-landing], [data-page=coffee]) .site-footer .footer-brand .brand-lockup {
    width: 92px;
  }
  body:is([data-page=payment-landing], [data-page=coffee]) .site-footer .footer-group-legal ul {
    column-gap: var(--space-3);
  }
}
.handoff-steps {
  margin: 8px 0 16px;
  padding-inline-start: 1.25rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
}
.handoff-steps li + li {
  margin-top: 4px;
}
.handoff-actions .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.handoff-actions .actions > .button {
  flex: 1 1 10rem;
}
.handoff-actions .actions > .button[hidden] {
  display: none;
}
.handoff-actions .donation-qr {
  width: min(100%, 240px);
  margin: 12px auto;
}
.handoff-actions .donation-qr > img {
  display: block;
  width: 100%;
  height: auto;
}
.handoff-official a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.handoff-page .donation-copy-actions .text-button {
  min-height: 44px;
}
.handoff-page > .handoff-return {
  margin-top: 16px;
}
.donation-page.payment-layout .donation-primary .button[data-confirmed],
.donation-page.payment-layout .donation-image-actions .button[data-confirmed] {
  background: #0b6b3a;
  border-color: #0b6b3a;
  color: #fff;
}
.donation-page.payment-layout .donation-primary .button[data-failed],
.donation-page.payment-layout .donation-image-actions .button[data-failed] {
  border-color: var(--error);
  color: var(--error);
}

/* src/qr-type-picker.css */
.workspace .type-picker {
  display: block;
  padding: 0;
  margin: 0 0 24px;
  border: 0;
}
.type-shortcuts {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  background: var(--ground);
  border-radius: var(--control-radius);
}
.type-picker .type-shortcuts > button {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.4;
  font-weight: 600;
  white-space: nowrap;
}
.type-picker .type-shortcuts > button:hover {
  color: var(--action);
  background: var(--selection);
}
.type-picker .type-shortcuts > button[aria-pressed=true] {
  background: var(--brand);
  color: var(--white);
}
.type-picker .other-type {
  display: flex;
  margin: 0;
  min-inline-size: 0;
  max-inline-size: 11rem;
}
.type-picker .type-shortcuts .other-type select {
  inline-size: auto;
  min-inline-size: 5rem;
  max-inline-size: 100%;
  min-block-size: 44px;
  padding: 10px 30px 10px 12px;
  border: 0;
  background-color: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
}
.type-picker .type-shortcuts .other-type select:has(option:checked:not([value=""])) {
  background-color: var(--selection);
  color: var(--action-hover);
}
.type-compact {
  display: none;
}
.type-compact label {
  display: block;
  margin-block-end: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
.type-picker .type-compact select {
  inline-size: 100%;
  min-block-size: 52px;
  font-weight: 600;
  color: var(--brand);
  background-color: var(--white);
}
.zalo-source-help {
  margin-block-start: 12px;
}
.zalo-source-help p {
  margin-block: 6px 0;
}
@container editor (max-width: 29rem) {
  .type-shortcuts {
    display: none;
  }
  .type-compact {
    display: block;
  }
}
@media (forced-colors: active) {
  .type-picker .type-shortcuts > button[aria-pressed=true] {
    border: 2px solid Highlight;
  }
}
.editor-pane .check-target,
.editor-pane .field > label.remember-payee {
  display: flex;
  gap: 10px;
  min-block-size: 44px;
  align-items: center;
  margin-block: 8px;
  font-weight: 400;
}
.editor-pane .check-target input,
.editor-pane .remember-payee input {
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 0;
}
.editor-pane .account-letters {
  display: none;
  margin: 2px 0 0;
  padding-inline: 0;
}
@media (pointer: coarse) {
  .editor-pane .account-letters {
    display: inline-flex;
  }
}
.editor-pane .remembered-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  margin-block-start: 0;
}
.editor-pane .remembered-note[hidden],
.editor-pane #remember-status[hidden] {
  display: none;
}
.editor-pane .remembered-note .text-button {
  margin: 0;
}
.editor-pane .payment-request-options {
  margin-block-end: 4px;
}
.field-meter {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  margin-block-start: 2px;
}
.field-meter .field-count {
  font-variant-numeric: tabular-nums;
}
.field-meter .field-count.is-over {
  color: var(--error);
  font-weight: 600;
}
.field-meter:has(.field-count:empty):has([id$=-encoded][hidden]) {
  display: none;
}
.editor-pane .references-help {
  margin-block: 0 12px;
}
.editor-pane .url-suggestion {
  margin: 4px 0 0;
  padding-inline: 0;
  overflow-wrap: anywhere;
  text-align: start;
}
.editor-pane .clear-status {
  margin: 0 0 16px;
}
.editor-pane .clear-status .text-button {
  min-block-size: 44px;
}
.form-bottom .primary[aria-busy=true] {
  cursor: progress;
}
.form-bottom .primary[aria-busy=true] > svg {
  animation: creator-busy 0.9s linear infinite;
}
@keyframes creator-busy {
  to {
    transform: rotate(360deg);
  }
}
.export-actions .button[aria-busy=true],
.secondary-actions [aria-busy=true] {
  cursor: progress;
}
.output-top .edit-details {
  display: none;
  margin: 0 0 0 auto;
}
@media (max-width: 820px) {
  .workspace[data-ready=true] .output-top .edit-details {
    display: inline-flex;
  }
}
.output-top .draft-label:empty {
  display: none;
}
.export-error:not([hidden]) {
  margin-block: 10px 0;
}
.output-pane .save-status {
  margin-block: 8px 0;
}
.payment-check {
  margin-block: 0 16px;
  padding: 12px 14px;
  border-radius: var(--control-radius);
  background: var(--white);
  border: 1px solid var(--line);
}
.payment-check p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink);
}
.payment-check .text-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: var(--text-sm);
}
.output-pane .button:not(:hover):not(:active),
.result-dock .button:not(:hover):not(:active) {
  transition-property: transform;
}
.result-dock {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-up);
}
.result-dock[hidden] {
  display: none;
}
.result-dock p {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-inline-size: 0;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
.result-dock p::before {
  content: "";
  flex: 0 0 8px;
  block-size: 8px;
  border-radius: var(--radius-pill);
  background: var(--muted);
}
.result-dock[data-state=ready] p::before {
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-ground);
}
.result-dock[data-state=pending] p::before {
  animation: dock-checking 0.9s ease-in-out infinite alternate;
}
@keyframes dock-checking {
  to {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .result-dock[data-state=pending] p::before {
    animation: none;
  }
}
@media (forced-colors: active) {
  .result-dock p::before {
    display: none;
  }
}
.result-dock .button {
  flex: none;
  min-block-size: 44px;
}
body.has-result-dock {
  padding-block-end: 72px;
}
body.has-result-dock .toast {
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 821px) {
  .result-dock {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .form-bottom .primary[aria-busy=true] > svg {
    animation: none;
  }
}
nav.qr-kind-links > div > a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

/* src/account.css */
.account-page {
  max-width: var(--container-tool);
  margin-inline: 0;
}
#account-content .account-section :is(h3, h4) {
  margin: 0;
}
#account-content > .account-skeleton {
  padding: 0 0 var(--space-6);
}
#account-content > .account-skeleton .skeleton-block {
  border-radius: 50%;
}
#profile-details .skeleton-field {
  max-width: 36rem;
}
#account-security .account-section-body:has(> .skeleton-row) {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.member-summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: 0 var(--space-6);
  border-bottom: 1px solid var(--line);
}
.member-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--selection);
  color: var(--brand);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.member-avatar > svg {
  width: 1.5rem;
  height: 1.5rem;
}
.member-identity {
  flex: 1 1 14rem;
  min-width: 0;
}
.member-summary h2 {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
.member-summary .member-email {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.member-shortcuts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
}
.account-layout {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--space-10);
  padding-top: var(--space-8);
}
.account-navigation {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: start;
  position: sticky;
  top: var(--space-6);
}
.account-navigation a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--control-height);
  padding: 10px 12px;
  border-radius: var(--control-radius);
  color: var(--ink);
  font-size: var(--text-sm);
  text-decoration: none;
}
.account-navigation a svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.account-navigation a:hover {
  background: var(--surface-muted);
}
.account-navigation a[aria-current] {
  background: var(--selection);
  color: var(--brand);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--action);
}
.account-navigation a[aria-current] svg {
  color: var(--action);
}
.account-sections {
  min-width: 0;
}
.account-section {
  scroll-margin-top: var(--space-6);
  padding: 0 0 var(--space-10);
  margin-bottom: var(--space-10);
  border-bottom: 1px solid var(--line);
}
.account-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.account-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-height);
}
.account-section-head h2 {
  margin: 0;
  font-size: var(--text-xl);
}
.account-refresh {
  flex: none;
  margin-inline-end: -10px;
}
.account-refresh[aria-busy=true] {
  cursor: progress;
}
.account-refresh[aria-busy=true] svg {
  animation: busy-turn 0.8s linear infinite;
}
.account-section .account-section-help,
.account-section .account-shared-scope {
  max-width: 65ch;
  margin: var(--space-1) 0 0;
}
.account-section-body {
  min-width: 0;
  margin-top: var(--space-5);
}
.account-section form {
  max-width: 36rem;
}
.account-section h3 {
  font-size: var(--text-md);
}
.profile-form .field {
  max-width: 36rem;
  margin-bottom: 0;
}
.profile-form .profile-actions {
  margin-top: var(--space-4);
}
.profile-form .profile-status {
  margin-top: var(--space-3);
}
.profile-email {
  max-width: 36rem;
  margin-top: var(--space-6);
}
.profile-email > p {
  margin: 0;
}
.profile-label {
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
}
.profile-email > .profile-value {
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.profile-email > .field-help {
  margin-top: 6px;
}
.profile-joined {
  margin: var(--space-4) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.security-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.security-fact {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
}
.security-fact:first-child {
  border-top: 0;
}
.security-fact-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-height: var(--control-height);
}
.security-fact-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  color: var(--muted);
}
.account-section .security-fact-label {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
}
.security-fact-action {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
}
.security-fact-action:empty {
  display: none;
}
.account-section .security-fact-action form {
  max-width: none;
}
.security-fact-body {
  display: grid;
  gap: var(--space-3);
  padding-inline-start: 32px;
}
.security-fact-body:empty {
  display: none;
}
.security-fact-head + .security-fact-body {
  margin-top: var(--space-1);
}
.security-fact .security-fact-body > * {
  margin-block: 0;
  min-width: 0;
}
.security-fact-value {
  color: var(--muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.security-fact .confirmation-actions {
  display: grid;
  gap: var(--space-2);
}
.security-fact .confirmation-actions > * {
  margin: 0;
}
.security-fact .advanced,
.mfa-manage .advanced {
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.security-fact .advanced > summary,
.mfa-manage .advanced > summary {
  min-height: 48px;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
}
.security-fact .advanced[open] > summary {
  margin-bottom: var(--space-1);
}
.security-fact .advanced > form {
  padding-bottom: var(--space-4);
}
.mfa-manage {
  display: grid;
  gap: var(--space-3);
}
.account-section .mfa-manage-form > :is(.field-help, .notice):first-child {
  margin: 0 0 var(--space-4);
}
.account-section .security-fact form > .field-error:not(:empty) {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
}
.account-section :is(.mfa-manage-form, .account-delete-form) > .button.danger-quiet {
  margin-inline-start: -16px;
}
.account-section :is(.mfa-manage-form, .account-delete-form) > .button.danger-quiet:focus-visible {
  outline-offset: -2px;
}
.account-reauth {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.account-reauth > .notice {
  margin: 0;
  justify-self: stretch;
}
.account-forgot {
  display: inline-flex;
}
.check.password-reveal {
  display: flex;
  min-height: var(--control-height);
  align-items: center;
  margin: var(--space-1) 0 0;
}
.check.password-reveal input {
  margin-top: 0;
}
.mfa-setup-area:empty {
  display: none;
}
#account-content .mfa-setup-area > h4 {
  margin: var(--space-2) 0 0;
  font-size: var(--text-md);
}
.mfa-steps {
  counter-reset: mfa-step;
  display: grid;
  gap: var(--space-6);
  max-width: 36rem;
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.mfa-steps > li {
  counter-increment: mfa-step;
  position: relative;
  min-width: 0;
  padding-inline-start: 2.5rem;
}
.mfa-steps > li::before {
  content: counter(mfa-step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  min-width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  background: var(--selection);
  color: var(--brand);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
}
.mfa-steps > li > p {
  margin: 0.15em 0 var(--space-3);
  color: var(--ink);
  font-size: var(--text-sm);
}
.mfa-qr.qr-preview {
  width: 180px;
  max-width: 100%;
  margin: 0 0 var(--space-2);
  padding: 10px;
  border: 1px solid var(--line);
}
.mfa-key {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.mfa-key-group {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--input-line);
  border-radius: var(--control-radius);
  overflow: hidden;
  background: var(--ground);
}
.mfa-key-group code {
  flex: 1 1 auto;
  align-self: center;
  min-width: 0;
  padding: 10px 12px;
  font-size: var(--text-md);
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  user-select: all;
}
.mfa-key-group .mfa-key-copy {
  flex: none;
  align-self: stretch;
  width: var(--control-height);
  border: 0;
  border-inline-start: 1px solid var(--input-line);
  border-radius: 0;
  background: var(--surface);
}
.mfa-key-group .mfa-key-copy:hover {
  background: var(--surface-muted);
}
.mfa-key-group .mfa-key-copy:focus-visible {
  outline-offset: -2px;
}
.mfa-enable .field {
  margin-bottom: var(--space-3);
}
.recovery-codes {
  display: grid;
  gap: var(--space-3);
}
.recovery-codes > .notice {
  max-width: 36rem;
}
.account-section .recovery-codes > * {
  margin: 0;
}
.recovery-codes > h4 {
  font-size: var(--text-md);
}
.recovery-code-list {
  justify-self: start;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--space-2) var(--space-10);
  list-style: none;
  padding: var(--space-4) var(--space-5);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.recovery-code-list code {
  font-size: var(--text-md);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.account-data-copy {
  display: grid;
  gap: var(--space-3);
  max-width: 36rem;
}
.account-section .account-data-copy > * {
  margin: 0;
}
.account-data-reauth {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}
.account-data-reauth > .notice {
  margin: 0;
  justify-self: stretch;
}
.account-section .account-delete {
  max-width: 36rem;
  margin-top: var(--space-6);
}
.account-section .account-delete > summary {
  color: var(--error);
  font-weight: 600;
}
.account-delete-form {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
}
.account-section .account-delete-form > * {
  margin-block: 0;
}
.account-delete-form > .field {
  margin-bottom: 0;
}
.account-delete-form > .button {
  justify-self: start;
}
.account-delete-consent {
  min-height: var(--control-height);
  padding-block: 0.35rem;
}
.account-delete-consent input,
.account-section .check input[type=checkbox] {
  width: 20px;
  height: 20px;
}
.account-section-error > .notice {
  margin: 0;
}
@media (max-width: 820px) {
  .member-summary {
    flex-wrap: wrap;
    padding-bottom: var(--space-5);
  }
  .member-shortcuts {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }
  .member-shortcuts .button {
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 16px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    font-size: var(--text-md);
    font-weight: 400;
    text-align: start;
  }
  .member-shortcuts .button:first-child {
    border-top: 0;
  }
  .member-shortcuts .button:hover {
    background: var(--ground);
  }
  .member-shortcuts .button:focus-visible {
    outline-offset: -2px;
  }
  .member-shortcuts .button::after {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background-color: var(--muted);
    -webkit-mask: var(--icon-chevron-down) center / 18px no-repeat;
    mask: var(--icon-chevron-down) center / 18px no-repeat;
    rotate: -90deg;
    forced-color-adjust: none;
  }
  .account-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-top: var(--space-6);
  }
  .account-navigation {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--line);
  }
  .account-navigation::-webkit-scrollbar {
    display: none;
  }
  .account-navigation a {
    flex: 1 0 auto;
    justify-content: center;
    padding-inline: var(--space-3);
    border-bottom: 2px solid transparent;
    border-radius: 0;
    white-space: nowrap;
  }
  .account-navigation a svg {
    display: none;
  }
  .account-navigation a[aria-current] {
    background: transparent;
    box-shadow: none;
    border-bottom-color: var(--action);
  }
  .account-navigation a:focus-visible {
    outline-offset: -2px;
  }
  .account-section {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-8);
  }
}
@media (max-width: 480px) {
  .security-fact {
    padding: var(--space-4);
  }
  .security-fact-body {
    padding-inline-start: 0;
  }
  .recovery-code-list {
    gap: var(--space-2) var(--space-6);
    padding: var(--space-3) var(--space-4);
  }
}
@media (forced-colors: active) {
  .account-navigation a[aria-current] {
    outline: 2px solid Highlight;
  }
  .member-shortcuts .button::after {
    background-color: CanvasText;
  }
}
.button[aria-busy=true],
.text-button[aria-busy=true] {
  cursor: progress;
  opacity: 0.72;
}
.account-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
#account-content > h2[tabindex="-1"]:focus {
  outline: none;
}
#auth-dialog p.auth-email-display {
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}
#auth-dialog .auth-email-display .text-button {
  display: inline;
  min-height: 0;
  padding: 12px 0;
  margin: -12px 0;
  font-size: inherit;
  overflow-wrap: normal;
}
.auth-email-display strong {
  color: var(--ink);
  font-weight: 600;
}
.auth-email-sep[hidden] {
  display: none;
}
.auth-otp-input,
:is(#auth-dialog, #account-content) .field input.auth-otp-input {
  max-width: 15rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.18em;
  font-size: var(--text-xl);
  line-height: 1.2;
  min-block-size: var(--input-height);
  padding-block: 0.3em;
}
.auth-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-5);
}
#auth-dialog .auth-secondary-actions:not(:has(> :not([hidden]))) {
  display: none;
}
#auth-otp-code-step > .auth-secondary-actions,
#auth-otp-mfa-step > .auth-secondary-actions {
  margin-top: calc(-1 * var(--space-2));
}
#auth-legacy-form .auth-secondary-actions {
  margin-top: var(--space-2);
}
#auth-dialog p.auth-resend-wait {
  display: flex;
  align-items: center;
  min-height: var(--control-height);
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
#auth-dialog .field .text-button {
  margin-top: var(--space-1);
}
.confirmation-actions .confirmation-wait[hidden] {
  display: none;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-6);
  color: var(--muted);
  font-size: var(--text-sm);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}
.auth-google-button {
  width: 100%;
  justify-content: center;
  gap: 0.75rem;
}
.auth-google-button img {
  width: 20px;
  height: auto;
  flex: 0 0 auto;
}
#auth-dialog p.auth-terms-copy {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
}
#auth-dialog:has(#auth-legacy-container:not([hidden])) .auth-terms-copy {
  display: none;
}
.auth-terms-copy a {
  color: var(--action);
}
#auth-legacy-container {
  margin-top: var(--space-4);
}
#auth-dialog > .notice {
  margin: 0 0 var(--space-4);
}
#auth-legacy-form .check {
  margin: var(--space-1) 0 0;
}
.library-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  container: library-tools / inline-size;
}
.library-toolbar[hidden] {
  display: none;
}
.library-search {
  position: relative;
  flex: 2 1 18rem;
  min-width: 0;
}
.library-search::before {
  content: "";
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  translate: 0 -50%;
  background-color: var(--muted);
  -webkit-mask: var(--icon-search) center / 18px no-repeat;
  mask: var(--icon-search) center / 18px no-repeat;
  pointer-events: none;
  forced-color-adjust: none;
}
.library-page #library-search {
  padding-inline-start: 42px;
}
.library-toolbar > select {
  flex: 1 1 11rem;
  width: auto;
  min-width: 0;
}
.library-toolbar > .button {
  flex: none;
}
@container library-tools (max-width: 60rem) {
  .library-search {
    flex-basis: 100%;
  }
}
@container library-tools (max-width: 34rem) {
  .library-toolbar > select {
    flex: 1 1 calc(50% - var(--space-2));
  }
  .library-toolbar > .button {
    flex: 1 1 100%;
  }
}
@container library-tools (max-width: 20rem) {
  .library-toolbar > select {
    flex-basis: 100%;
  }
}
.library-folder-error:empty {
  display: none;
}
.library-folder-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  margin-bottom: var(--space-3);
}
.library-folder-error > .field-error {
  margin: 0;
}
.library-folder-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.library-folder-bar[hidden] {
  display: none;
}
.library-folder-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  min-height: var(--control-height);
  padding-inline-start: 12px;
  border-radius: var(--control-radius);
  background: var(--selection);
  box-shadow: inset 0 0 0 1px var(--action);
  color: var(--brand);
  font-size: var(--text-sm);
  font-weight: 600;
}
.library-folder-chip > svg {
  width: 18px;
  height: 18px;
}
.library-folder-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.library-folder-clear {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--control-height);
  min-height: var(--control-height);
  padding: 0;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.library-folder-clear:hover {
  background: color-mix(in srgb, var(--action) 12%, transparent);
}
.library-folder-clear:focus-visible {
  outline-offset: -2px;
}
.library-folder-clear > svg {
  width: 18px;
  height: 18px;
}
@media (forced-colors: active) {
  .library-folder-chip {
    outline: 2px solid Highlight;
  }
}
.library-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-4);
  margin-bottom: var(--space-2);
}
.library-status-row .library-status {
  margin: 0;
}
.library-results.is-loading {
  opacity: 0.55;
  transition: opacity var(--control-time) ease-out;
}
.library-results > .notice {
  margin-top: 0;
}
.library-rows .owned-thumb > svg {
  stroke: none;
}
.library-rows .owned-row[aria-busy=true] {
  opacity: 0.55;
}
.library-rows > .skeleton-row {
  grid-template-columns: 56px minmax(0, 1fr);
  min-height: 88px;
  padding: var(--space-4) var(--space-5);
}
.library-rows > .skeleton-row .skeleton-block {
  width: 56px;
  height: 56px;
}
.library-kind {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--control-radius);
  background: var(--surface-muted);
  color: var(--ink);
  font-weight: 600;
}
.library-when-short {
  display: none;
}
.library-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-3);
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}
.library-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.library-label > svg {
  width: 14px;
  height: 14px;
}
.library-rows .owned-main > .field-error {
  margin-top: 6px;
}
@container owned (max-width: 34rem) {
  .library-when-long {
    display: none;
  }
  .library-when-short {
    display: inline;
  }
}
.library-more {
  margin-top: var(--space-3);
}
.library-more:empty {
  display: none;
}
.library-more .button {
  width: 100%;
}
.library-more > .field-error {
  margin-top: var(--space-2);
}
#version-dialog p.version-subtitle {
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
}
#version-dialog .version-picker {
  margin-bottom: var(--space-4);
}
.version-layout {
  display: grid;
  gap: var(--space-6);
}
.version-visual {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
}
.version-visual > .version-qr {
  width: 100%;
  max-width: 240px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
}
.version-visual > .version-downloads {
  justify-content: center;
}
.version-downloads > .button {
  white-space: nowrap;
}
.version-facts {
  min-width: 0;
}
.version-facts > .payload-detail {
  margin-top: var(--space-3);
}
#version-dialog p.version-note {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
@media (min-width: 720px) {
  .version-layout {
    grid-template-columns: 256px minmax(0, 1fr);
    align-items: start;
  }
  .version-visual {
    justify-items: stretch;
  }
  .version-visual > .version-qr {
    max-width: none;
  }
  .version-visual > .version-downloads > .button {
    flex: 1 1 auto;
  }
}
#library-move-folder + .field-error + .field-help,
.library-move-dialog .field-help {
  margin-top: 6px;
}
.library-move-dialog p.library-move-subject {
  margin: 0 0 var(--space-4);
}
.library-move-dialog .library-move-create {
  margin-top: var(--space-1);
}
.library-move-create > svg {
  width: 18px;
  height: 18px;
}
.library-folder-dialog .field {
  margin-bottom: 0;
}
.managed-links {
  scroll-margin-top: 1.5rem;
}
.managed-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-block: 0.75rem;
}
.managed-head .managed-quota {
  margin: 0;
}
.managed-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}
.managed-row h3 {
  margin: 0;
  overflow-wrap: anywhere;
}
.managed-status {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--success-ground);
  color: var(--success);
}
.managed-status[data-status=paused] {
  background: var(--surface-muted);
  color: var(--muted);
}
.managed-status[data-status=frozen] {
  background: var(--error-ground);
  color: var(--error);
}
.managed-address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.75rem;
  margin-block: 0.5rem 0.25rem;
}
.managed-address code {
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
}
.managed-actions {
  margin: 0.75rem 0 0;
  gap: 0 16px;
}
.managed-row .managed-actions > * {
  flex: 0 1 auto !important;
}
.managed-deleted {
  margin-top: 0.75rem;
}
.managed-case + .managed-case {
  border-top: 1px solid var(--line);
  margin-top: 1rem;
  padding-top: 0.5rem;
}
.managed-history h3 {
  font-size: var(--text-md);
  margin: 1.25rem 0 0.4rem;
}
.managed-history .managed-case:first-child h3 {
  margin-top: 0;
}
.managed-appeal .button {
  margin-bottom: 0.5rem;
}
.managed-compare {
  overflow-wrap: anywhere;
}
.report-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-block: 0.75rem;
}
#report-status[tabindex="-1"]:focus {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.guide-article #report-form p.field-error {
  color: var(--error);
}
.guide-article #report-form p.field-help,
.guide-article #report-form p.field-error {
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-top: 6px;
}
#account-content.google-return-card {
  max-width: 36rem;
  margin-block: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
#account-content.google-return-card h2 {
  margin-top: 0;
}
#account-content.google-return-card .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1rem;
}
.account-return {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-block: 1rem 1.5rem;
}
.account-return p {
  margin: 0;
}
.profile-email-change {
  margin-top: 0.25rem;
}
.editing-record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem;
  margin-bottom: 16px;
}
.editing-record p {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* src/developer-portal.css */
.developer-portal,
.developer-page,
.integrations-page,
.developer-key-dialog,
.developer-revoke-dialog {
  --code-font:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
}
.developer-portal h2 {
  font-size: var(--text-xl);
  line-height: 1.4;
  margin: 0 0 1rem;
}
.developer-portal h3 {
  font-size: var(--text-lg);
  margin: 0;
}
.developer-portal :is(input, select, textarea) {
  min-width: 0;
}
.developer-portal :is(input, textarea) {
  caret-color: var(--action);
}
.developer-portal code,
.developer-key-dialog code,
.developer-revoke-dialog code {
  font-family: var(--code-font);
  font-size: 0.875em;
  overflow-wrap: anywhere;
}
.developer-feedback {
  margin: 0;
  color: var(--muted);
}
.developer-feedback.error {
  color: var(--error);
}
#developer-app-form,
.developer-section {
  padding: 28px;
  background: var(--surface);
  border-radius: var(--radius);
}
.developer-portal fieldset {
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
}
.developer-scopes label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding-block: 0.5rem;
  cursor: pointer;
}
.developer-scopes label span {
  display: grid;
  gap: 0.125rem;
}
.developer-scopes input {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
}
.developer-scopes code {
  color: var(--muted);
  overflow-wrap: normal;
  word-break: normal;
}
.developer-scope-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}
.developer-scope-group label {
  align-items: start;
}
.developer-scope-group input {
  margin-top: 0.25rem;
}
.developer-scope-group strong {
  line-height: 1.5;
}
.developer-scope-group small {
  color: var(--muted);
  font-size: var(--text-sm);
}
.developer-scope-group .developer-scope-use {
  display: block;
  line-height: 1.45;
}
.developer-scope-summary {
  list-style: none;
  padding: 0;
  margin: 0;
}
.developer-scope-summary li + li {
  margin-top: 0.375rem;
}
.developer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: 1.5rem;
}
.developer-actions :is(button, a) {
  min-height: 2.75rem;
}
.developer-actions select {
  width: auto;
  max-width: 100%;
  flex: 0 1 10rem;
}
.developer-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  margin: 1.5rem 0;
}
.developer-meta div {
  min-width: 0;
}
.developer-meta dt {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-bottom: 0.25rem;
}
.developer-meta dd {
  margin: 0;
  font-weight: 600;
}
.developer-section + .developer-section {
  margin-top: var(--space-6);
}
.developer-section-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}
.developer-portal button[aria-busy=true] {
  cursor: progress;
}
.developer-portal button[data-busy-lock],
.developer-revoke-dialog .button[aria-disabled=true]:not([aria-busy=true]) {
  opacity: 0.6;
  cursor: progress;
}
.developer-portal button[data-busy-lock]:active,
.developer-revoke-dialog .button[aria-disabled=true]:not([aria-busy=true]):active {
  transform: none;
  filter: none;
}
@media (max-width: 820px) {
  .developer-scope-groups {
    grid-template-columns: minmax(0, 1fr);
  }
  .developer-meta {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 480px) {
  .developer-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .developer-actions {
    align-items: stretch;
  }
  .developer-actions > :is(button, a) {
    flex: 1 1 10rem;
    text-align: center;
  }
  .developer-actions select {
    width: 100%;
    flex: 1 1 100%;
  }
  .developer-portal select:not([multiple]):not([size]) {
    padding-inline-start: 12px;
    padding-inline-end: 48px;
    background-position: right 12px center;
    background-size: 1em 1em;
  }
}
.developer-portal.developer-admin {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  overflow-wrap: anywhere;
}
.developer-admin h1 {
  font-size: var(--text-h1);
  line-height: 1.25;
}
.developer-admin .page-heading {
  align-items: start;
  gap: 1.5rem;
}
.developer-admin .field {
  margin-block: 1.25rem;
}
.developer-admin :is(input:not([type=checkbox]), select, textarea) {
  width: 100%;
  min-height: 2.875rem;
}
.developer-admin .developer-feedback {
  min-height: 1.5em;
  margin-block: 1rem;
}
.developer-admin legend {
  font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: 0.5rem;
}
.developer-admin .developer-scopes {
  margin-block: 1.5rem;
}
.developer-admin .developer-scopes legend {
  font-size: var(--text-md);
}
.developer-admin .developer-scope-group legend {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.developer-admin .button {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}
.developer-ungranted,
.developer-scope-expansion {
  margin-top: 1.5rem;
}
.developer-ungranted h3 {
  margin-bottom: 0.75rem;
}
.developer-scope-expansion label {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding-block: 0.5rem;
  cursor: pointer;
}
.developer-scope-expansion input {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.developer-admin-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-block: 1rem 1.5rem;
}
.developer-admin-toolbar select {
  width: auto;
  max-width: 100%;
  flex: 0 1 15rem;
}
.developer-admin-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.5fr);
  gap: 1.5rem;
  align-items: start;
}
.developer-app-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.developer-app-list button {
  display: block;
  width: 100%;
  padding: 1rem;
  background: transparent;
  text-align: start;
  border: 0;
  border-radius: var(--control-radius);
  min-height: 3rem;
}
.developer-app-list button[aria-pressed=true] {
  background: var(--selection);
  color: var(--brand);
}
.developer-app-list button:hover {
  background: var(--surface-muted);
}
.developer-app-list button > span:not(.badge) {
  display: block;
  color: var(--muted);
  margin-top: 0.25rem;
  font-size: var(--text-sm);
}
.developer-app-list button > .badge {
  margin-top: var(--space-2);
}
.developer-admin .developer-section-heading > .badge {
  flex: none;
  justify-self: start;
  margin-top: calc(var(--text-xl) * 0.7 - 12px);
}
.developer-limit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 820px) {
  .developer-portal.developer-admin {
    padding: 1.5rem 1rem 3rem;
  }
  .developer-admin .page-heading {
    display: grid;
  }
  .developer-admin-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .developer-admin .developer-section {
    padding: 1.25rem;
  }
}
@media (max-width: 480px) {
  .developer-portal.developer-admin {
    padding-inline: 12px;
  }
  .developer-admin .developer-section {
    padding: 16px;
  }
  .developer-app-list button {
    padding: 16px;
  }
  .developer-limit-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
.developer-portal.developer-owner {
  max-width: var(--container-tool);
  margin-inline: 0;
}
.developer-owner textarea {
  display: block;
}
.developer-owner #developer-status:not(:empty) {
  margin-bottom: var(--space-6);
}
.developer-owner .developer-inline-status {
  margin: var(--space-4) 0 0;
}
.developer-owner #developer-access:not(:empty) {
  margin-bottom: var(--space-6);
}
.developer-owner #developer-access > .notice {
  margin: 0;
}
.developer-owner .developer-email-notice .confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
}
.developer-owner .developer-email-notice .confirmation-actions .field-help {
  margin: 0;
  color: inherit;
}
.developer-owner .developer-loading .skeleton-field:last-child {
  margin-bottom: 0;
}
.developer-owner #developer-app-content > .notice {
  margin: 0 0 var(--space-6);
}
.developer-owner #developer-app-form h2 {
  margin: 0;
  font-size: var(--text-xl);
}
.developer-owner .developer-form-intro {
  margin: var(--space-2) 0 var(--space-6);
}
.developer-owner #developer-app-errors {
  margin: 0 0 var(--space-6);
}
.developer-owner .developer-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  column-gap: var(--space-6);
}
.developer-owner .developer-scopes {
  margin-top: var(--space-4);
}
.developer-owner .developer-scopes > legend {
  padding: 0;
  margin-bottom: var(--space-1);
  font-size: var(--text-md);
  font-weight: 600;
}
.developer-owner .developer-scopes > .field-error {
  margin: var(--space-1) 0 0;
}
.developer-owner .developer-scopes > .field-help {
  margin-top: var(--space-1);
}
.developer-owner .developer-scope-groups {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr));
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-4);
}
.developer-owner .developer-scope-group legend {
  padding: 0;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
}
.developer-owner .developer-scopes label {
  align-items: flex-start;
  min-height: var(--control-height);
  padding-block: 10px;
}
.developer-owner .developer-scopes input {
  margin-top: 3px;
}
.developer-owner .developer-scopes label strong {
  font-weight: 600;
  line-height: 1.5;
}
.developer-owner #developer-app-actions {
  margin-top: var(--space-6);
}
.developer-owner .developer-app-heading {
  align-items: flex-start;
}
.developer-owner .developer-app-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
}
.developer-owner .developer-app-name h2 {
  margin: 0;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.developer-owner .developer-refresh {
  flex: none;
  margin: calc(var(--text-xl) * 0.7 - var(--control-height) / 2) -10px 0 0;
}
.developer-owner .developer-refresh[aria-busy=true] > svg {
  animation: busy-turn 0.8s linear infinite;
}
.developer-app > .developer-app-summary {
  margin-top: var(--space-5);
}
.developer-owner .developer-app-summary > div {
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
}
@container summary (max-width: 30rem) {
  .developer-owner .developer-app-summary > div {
    grid-template-columns: minmax(0, 1fr);
  }
}
.developer-owner .developer-app-summary dd:has(> .summary-copy) {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.developer-owner .developer-app-summary dd > .summary-copy {
  flex: none;
  margin-inline-start: 0;
}
.developer-owner .developer-app-summary .is-text {
  font-weight: 400;
}
.developer-owner .developer-app-summary .developer-scope-summary li + li {
  margin-top: 2px;
}
.developer-owner .developer-app-summary code {
  font-size: var(--text-sm);
}
.developer-owner .developer-section > .notice {
  margin: var(--space-5) 0 0;
}
.developer-owner .developer-section > .notice p + p {
  margin-top: var(--space-1);
}
.developer-owner .developer-section > .notice .text-link {
  margin-top: var(--space-1);
  white-space: nowrap;
}
.developer-owner .developer-section > .actions {
  margin-top: var(--space-5);
}
.developer-keys > .developer-keys-help {
  margin: 0;
}
.developer-owner #developer-key-actions {
  margin-top: var(--space-5);
}
.developer-owner #developer-key-actions label {
  font-size: var(--text-sm);
  font-weight: 600;
}
.developer-owner #developer-key-actions select {
  flex: none;
  width: 10rem;
}
.developer-keys > .developer-key-empty {
  margin-top: var(--space-2);
}
.developer-owner .developer-key-empty #developer-key-actions {
  justify-content: center;
  margin-top: var(--space-2);
}
.developer-key-list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  container: keys / inline-size;
}
.developer-key-list:empty {
  display: none;
}
.developer-key-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-top-width: 0;
}
.developer-key-list li:first-child {
  border-top-width: 1px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.developer-key-list li:last-child {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.developer-key-list li:only-child {
  border-radius: var(--radius-lg);
}
.developer-key-main {
  min-width: 0;
}
.developer-key-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}
.developer-key-title code {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
.developer-key-meta {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.developer-owner .developer-key-list .developer-actions {
  margin: 0;
  justify-content: flex-end;
}
.developer-owner .developer-key-list .developer-actions > .button {
  flex: 0 1 auto;
  min-width: 0;
}
.developer-owner #developer-key-pending {
  margin: var(--space-5) 0 0;
}
.developer-owner #developer-key-pending .notice-actions > .button {
  flex: 1 1 auto;
}
.developer-key-example {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.developer-key-example h3 {
  font-size: var(--text-lg);
}
.developer-key-example .field-help {
  margin-top: var(--space-1);
}
.developer-key-example .code-block {
  margin: var(--space-4) 0 var(--space-2);
}
@container keys (max-width: 34rem) {
  .developer-key-list li {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }
  .developer-owner .developer-key-list .developer-actions {
    justify-content: flex-start;
  }
  .developer-owner .developer-key-list .developer-actions > .button {
    flex: 1 1 auto;
  }
  .developer-owner .developer-key-list .developer-actions > .button.danger-quiet:only-child {
    flex: none;
    margin-block: calc(-1 * var(--space-3));
    margin-inline-start: -16px;
  }
}
.developer-owner #developer-scope-request-form {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
@media (max-width: 480px) {
  .developer-owner #developer-app-form,
  .developer-owner .developer-section {
    padding: 20px 16px;
  }
  .developer-owner .developer-section-heading.developer-app-heading {
    display: flex;
  }
  .developer-owner #developer-key-actions select {
    flex: 1 1 100%;
    width: 100%;
  }
}
.developer-key-dialog {
  max-width: 38rem;
}
.developer-key-dialog .field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: calc(3lh + 1.5rem + 2px);
  resize: vertical;
  padding: 0.75rem;
  font:
    0.875rem/1.6 ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  word-break: break-all;
  field-sizing: content;
}
@media (max-width: 640px) {
  .developer-key-dialog .field textarea {
    min-height: calc(4lh + 1.5rem + 2px);
  }
}
@media (max-width: 360px) {
  .developer-key-dialog .field textarea {
    min-height: calc(6lh + 1.5rem + 2px);
  }
}
.developer-key-dialog .developer-meta {
  margin-block: var(--space-5) 0;
}
.developer-revoke-dialog.confirm-dialog p.dialog-subject:not(.field-error) {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.code-block {
  position: relative;
  margin: var(--space-4) 0;
  color: var(--white);
  background: var(--brand);
  border-radius: var(--radius-lg);
}
.code-block > pre {
  margin: 0;
  padding: var(--space-5) 60px var(--space-5) var(--space-5);
  overflow-x: auto;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  tab-size: 2;
  font: 0.875rem/1.7 var(--code-font, ui-monospace, monospace);
  color: inherit;
  border-radius: inherit;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-line) transparent;
}
.code-block > pre > code {
  font: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
}
.code-block > pre::selection,
.code-block > pre ::selection {
  color: var(--brand);
  background: var(--on-brand-muted);
}
.code-block > pre:focus-visible {
  outline: none;
}
.code-block:has(> pre:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.code-block::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 64px;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background:
    linear-gradient(
      to right,
      transparent,
      var(--brand) 80%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-out);
}
.code-block.is-scrollable::after {
  opacity: 1;
}
.code-block .code-copy {
  position: absolute;
  z-index: 1;
  top: 6px;
  inset-inline-end: 6px;
  color: var(--on-brand-muted);
  background: var(--brand);
}
.code-block .code-copy:hover {
  color: var(--white);
  background: var(--brand-hover);
}
.code-block .code-copy:focus-visible {
  outline: 2px solid var(--focus-on-brand);
  outline-offset: -2px;
}
.code-block .code-copy[data-copied] {
  color: var(--white);
}
.code-block .code-copy-state {
  position: absolute;
  z-index: 1;
  top: 16px;
  inset-inline-end: 54px;
  max-width: min(18rem, calc(100% - 72px));
  width: max-content;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--white);
  background: var(--brand-current);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast) ease-out;
}
.code-block .code-copy-state:not(:empty) {
  opacity: 1;
}
@media (max-width: 480px) {
  .code-block > pre {
    padding: var(--space-4) 56px var(--space-4) var(--space-4);
  }
  .code-block .code-copy {
    top: 4px;
    inset-inline-end: 4px;
  }
  .code-block .code-copy-state {
    top: 14px;
    inset-inline-end: 50px;
  }
}
@media (forced-colors: active) {
  .code-block {
    border: 1px solid CanvasText;
  }
  .code-block::after {
    display: none;
  }
}
@media print {
  .code-block {
    color: var(--ink);
    background: none;
    border: 1px solid var(--line);
  }
  .code-block > pre {
    padding-inline-end: var(--space-5);
    overflow: visible;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .code-block .code-copy,
  .code-block .code-copy-state,
  .code-block::after {
    display: none;
  }
}
.developer-page {
  max-width: none;
  margin: 0;
}
.developer-heading {
  margin-bottom: var(--space-8);
}
.developer-heading h1 {
  margin: 0;
  font-size: var(--text-h1);
  color: var(--ink);
}
.developer-heading > p {
  max-width: 68ch;
  text-wrap: pretty;
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: var(--text-md);
  line-height: var(--leading-body);
}
.developer-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
  margin-top: var(--space-3);
}
.developer-sections a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  font-size: var(--text-sm);
  font-weight: 600;
  text-underline-offset: 4px;
}
.developer-page section {
  scroll-margin-top: calc(var(--header-height) + var(--space-6));
}
.developer-reference {
  max-width: 72ch;
  margin-top: var(--space-12);
}
.developer-reference h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
}
.developer-reference h3 {
  margin: var(--space-8) 0 var(--space-2);
  font-size: var(--text-lg);
}
.developer-reference p {
  line-height: 1.75;
  text-wrap: pretty;
}
.developer-reference p + p {
  margin-top: var(--space-3);
}
.developer-reference code {
  font-family: var(--code-font);
  font-size: 0.875em;
}
.developer-reference .code-block {
  margin: var(--space-5) 0;
}
.developer-file-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.developer-file-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  font-size: var(--text-sm);
  font-weight: 600;
  text-underline-offset: 4px;
}
.developer-contract {
  margin: var(--space-6) 0;
}
.developer-contract > div + div {
  margin-top: var(--space-5);
}
.developer-contract dt {
  font-family: var(--code-font);
  font-size: var(--text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.developer-contract dd {
  margin: var(--space-1) 0 0;
  line-height: 1.7;
  color: var(--muted);
}
.developer-apps-entry {
  margin: var(--space-4) 0 var(--space-5);
}
.developer-scope-table {
  margin: var(--space-4) 0;
}
.developer-scope-table table {
  font-size: var(--text-sm);
}
.developer-scope-table code {
  font-size: var(--text-xs);
  white-space: nowrap;
}
.developer-scope-table td:first-child code {
  white-space: normal;
}
.developer-scope-table td:first-child code > span {
  white-space: nowrap;
}
.developer-reference > .advanced {
  margin-top: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.developer-reference > .advanced + p {
  margin-top: var(--space-5);
}
.developer-reference > .advanced > summary {
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 600;
}
.developer-reference > .advanced > .developer-contract {
  margin: 0;
}
.developer-reference > .link-line {
  margin-top: var(--space-3);
}
.developer-page :is(a, button, select, textarea):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.developer-page ::selection {
  background: var(--selection);
  color: var(--ink);
}
@media (max-width: 480px) {
  .developer-scope-table :is(th, td) {
    padding: 10px 12px;
  }
}
@media (max-width: 360px) {
  .developer-scope-table :is(th, td) {
    padding-inline: var(--space-2);
  }
}
.integrations-page > section {
  max-width: 72ch;
}
.integrations-page > section + section {
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--line);
}
.integrations-page h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
}
.integrations-page h3 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--text-md);
}
.integrations-page p {
  line-height: var(--leading-body);
  text-wrap: pretty;
}
.integrations-page p + p {
  margin-top: var(--space-3);
}
.integrations-page .code-block {
  margin: var(--space-5) 0 var(--space-2);
}
.integrations-page .link-line {
  margin-top: var(--space-2);
}
.integrations-page .notice {
  margin: var(--space-4) 0;
}
.integrations-page .actions {
  margin-top: var(--space-6);
}
.integrations-page .integration-capabilities > div {
  grid-template-columns: minmax(9rem, 40%) minmax(0, 1fr);
  align-items: center;
}
.integrations-page .integration-capabilities dd {
  font-weight: 600;
}
.integrations-page .integration-json {
  margin-top: var(--space-3);
}
@container summary (max-width: 30rem) {
  .integrations-page .integration-capabilities > div {
    grid-template-columns: minmax(0, 1fr);
  }
}
.integration-import .integration-import-link {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.integration-import .text-button + .text-button {
  margin-inline-start: 20px;
}

/* src/admin.css */
.admin-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 20px;
}
.admin-panel .admin-section-heading h2 {
  margin-bottom: 0;
}
.admin-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-list-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.admin-list-status > span {
  flex: 1 1 16rem;
}
.admin-gateway {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.admin-gateway > p {
  flex: 1 1 18rem;
  margin: 0;
}
.admin-inline-status {
  flex: 1 1 14rem;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
}
.admin-inline-status.error {
  color: var(--error);
}
.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 22px;
}
#admin-config-versions h3 {
  margin: 32px 0 12px;
  font-size: var(--text-md);
}
.admin-list-search:not(.admin-bio-controls) {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  margin: 18px 0 8px;
}
.admin-list-search > .field {
  min-width: 0;
  margin: 0;
}
.admin-list-search > .button {
  min-height: 46px;
}
@media (max-width: 480px) {
  .admin-list-search:not(.admin-bio-controls) {
    grid-template-columns: minmax(0, 1fr);
  }
}
.admin-panel .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.admin-panel .payment-admin-reports {
  margin-top: 40px;
}
.admin-list-search.admin-list-filter {
  grid-template-columns: minmax(0, 20rem);
}
.admin-dialog .print-preview-heading {
  margin-bottom: 16px;
}
.dialog-details {
  display: grid;
  gap: 6px;
  margin: -8px 0 4px;
  font-size: var(--text-sm);
}
.dialog-details > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 12px;
}
.dialog-details dt {
  color: var(--muted);
}
.dialog-details dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.admin-paging {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 14px;
}
.admin-range {
  font-size: var(--text-sm);
  color: var(--muted);
}
.admin-panel .payment-page-row {
  display: flex;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.admin-panel .payment-page-row:first-child {
  border-top: 1px solid var(--line);
}
.payment-page-details {
  flex: 1 1 16rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.admin-panel .payment-page-row h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-md);
}
.payment-page-details p {
  margin: var(--space-1) 0 0;
  color: var(--muted);
}
.payment-page-row .admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.payment-page-row .admin-row-actions > * {
  margin: 0;
}
.payment-page-row .badge {
  display: inline-flex;
  margin-top: var(--space-2);
  flex: none;
}
@media (max-width: 820px) {
  .admin-panel .payment-page-row {
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .payment-page-row .admin-row-actions {
    flex-basis: 100%;
  }
}
.admin-row-actions > * {
  margin: 2px 10px 2px 0;
}
@media (min-width: 821px) {
  .admin-record-table .admin-actions-head,
  .admin-record-table td.admin-row-actions {
    position: sticky;
    right: 0;
    box-shadow: inset 1px 0 0 var(--line);
  }
  .admin-record-table td.admin-row-actions {
    background: var(--white);
    white-space: nowrap;
  }
}
@media (max-width: 820px) {
  .table-wrap.admin-table-wrap {
    overflow: visible;
    border: 0;
  }
  .admin-table-wrap .admin-record-table {
    min-width: 0;
    background: transparent;
  }
  .admin-record-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .admin-record-table,
  .admin-record-table tbody,
  .admin-record-table tr {
    display: block;
    width: 100%;
  }
  .admin-record-table tr {
    margin-bottom: 12px;
    padding: 6px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
  }
  .admin-record-table td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
    gap: 2px 12px;
    padding: 8px 14px;
    border-bottom: 0;
    overflow-wrap: anywhere;
  }
  .admin-record-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
  }
  .admin-record-table td > * {
    grid-column: 2;
    justify-self: start;
  }
  .admin-record-table td.admin-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
  }
  .admin-record-table td.admin-row-actions::before {
    content: none;
  }
  .admin-record-table td.admin-row-actions > * {
    margin: 0;
  }
}
.developer-review-status {
  flex-basis: 100%;
  margin: 0.75rem 0 0;
}
.developer-admin-range {
  margin-top: 0.75rem;
}
.developer-select-requested {
  margin: 0.75rem 0 0;
}
.developer-detail-empty {
  color: var(--muted);
}
.admin-showcase {
  min-width: 0;
  margin-block: 1.5rem 0;
  padding: 0;
  border: 0;
}
.admin-showcase legend {
  font-size: var(--text-lg);
  font-weight: 650;
}
.admin-showcase-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  grid-template-areas: "choices preview" "soon preview";
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: var(--space-6);
  row-gap: var(--space-5);
  margin-top: var(--space-4);
}
.admin-showcase-choices {
  grid-area: choices;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.75rem), 1fr));
  gap: var(--space-3);
}
.admin-showcase-choice {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
.admin-showcase-choice input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
.admin-showcase-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(
      60% 45% at 50% 38%,
      var(--on-brand-glow),
      transparent 72%),
    linear-gradient(
      165deg,
      var(--brand-hover) 0%,
      var(--brand) 58%);
  forced-color-adjust: none;
}
.admin-showcase-art picture,
.admin-showcase-stage picture {
  display: contents;
}
.admin-showcase-art img,
.admin-showcase-stage img {
  display: block;
  width: 100%;
  height: 100%;
}
.admin-showcase-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.admin-showcase-name {
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
.admin-showcase-state {
  display: grid;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.admin-showcase-state > span {
  text-wrap: pretty;
}
.admin-showcase-keep {
  display: inline-block;
}
.admin-showcase-live {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--warning-ink);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.admin-showcase-save-note {
  margin: var(--space-6) 0 0;
}
.admin-showcase-shown {
  margin-top: 2px;
  font-weight: 600;
  color: var(--success);
}
.admin-showcase-shown svg {
  width: 1.2em;
  height: 1.2em;
  margin-inline-end: var(--space-1);
  vertical-align: -0.25em;
}
.admin-showcase-check {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--action);
  color: var(--white);
  box-shadow: 0 0 0 2px var(--white);
  pointer-events: none;
}
.admin-showcase-check svg {
  width: 1rem;
  height: 1rem;
  stroke-width: 2.4;
}
.admin-showcase-choice:has(input:checked) {
  border-color: var(--action);
  background: var(--selection);
  box-shadow: inset 0 0 0 1px var(--action);
}
.admin-showcase-choice:has(input:checked) .admin-showcase-check {
  display: grid;
}
.admin-showcase-choice:has(input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
@media (hover: hover) {
  .admin-showcase-choice:not(.is-unavailable):hover {
    border-color: var(--input-line);
  }
  .admin-showcase-choice:has(input:checked):hover {
    border-color: var(--action);
  }
}
.admin-showcase-choice:not(.is-unavailable):active {
  background: var(--selection);
}
.admin-showcase-soon {
  grid-area: soon;
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.admin-showcase-soon-title {
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: var(--leading-snug);
  color: var(--muted);
}
.admin-showcase-soon-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-2);
}
.admin-showcase-choice.is-unavailable {
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-3);
  padding: var(--space-2);
  cursor: not-allowed;
}
.admin-showcase-choice.is-unavailable .admin-showcase-check {
  top: calc(var(--space-1) / 2);
  right: auto;
  left: calc(var(--space-2) + 2.75rem - 0.875rem);
  width: 1.25rem;
  height: 1.25rem;
}
.admin-showcase-choice.is-unavailable .admin-showcase-check svg {
  width: 0.875rem;
  height: 0.875rem;
}
.admin-showcase-choice.is-unavailable .admin-showcase-art {
  border: 1px dashed var(--input-line);
  background: var(--surface-muted);
  color: var(--muted);
  forced-color-adjust: auto;
}
.admin-showcase-choice.is-unavailable .admin-showcase-art svg {
  width: 1.25rem;
  height: 1.25rem;
}
.admin-showcase-choice.is-unavailable .admin-showcase-name {
  color: var(--muted);
}
.admin-showcase-preview {
  grid-area: preview;
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
}
.admin-showcase-mock {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  color: var(--white);
  background-color: var(--brand);
  background-image:
    linear-gradient(
      175deg,
      var(--brand-hover) 0%,
      var(--brand) 46%);
  box-shadow: inset 0 1px 0 var(--on-brand-hairline), var(--shadow-card);
}
.admin-showcase-stage {
  display: block;
  aspect-ratio: 1;
  width: 100%;
  border-radius: var(--radius);
  background:
    radial-gradient(
      60% 45% at 50% 38%,
      var(--on-brand-glow),
      transparent 72%);
}
.admin-showcase-mock-caption {
  margin-top: calc(-1 * var(--space-1));
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  text-align: center;
  color: var(--on-brand-subtle);
}
.admin-showcase-mock-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--on-brand-accent);
}
.admin-showcase-mock-eyebrow svg {
  width: 1.25em;
  height: 1.25em;
}
.admin-showcase-mock-title {
  font-size: var(--text-md);
  font-weight: 650;
  line-height: var(--leading-tight);
  color: var(--white);
  text-wrap: pretty;
}
.admin-showcase-mock-text {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--on-brand-muted);
}
.admin-showcase-mock-entry {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--brand);
  background: var(--white);
}
.admin-showcase-mock-entry svg {
  width: 1.1em;
  height: 1.1em;
}
.admin-showcase-preview figcaption {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-align: center;
  color: var(--muted);
}
@media (max-width: 760px) {
  .admin-showcase-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "choices" "preview" "soon";
    grid-template-rows: none;
  }
  .admin-showcase-preview {
    justify-self: center;
    width: min(100%, 20rem);
  }
  .admin-showcase-stage {
    justify-self: center;
    width: min(100%, 15rem);
  }
}
@media (max-width: 480px) {
  .admin-showcase-choices {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr));
    gap: var(--space-2);
  }
}
@media (forced-colors: active) {
  .admin-showcase-choice:has(input:checked) {
    margin: -1px;
    border: 2px solid Highlight;
  }
  .admin-showcase-check {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    box-shadow: 0 0 0 2px Canvas;
  }
  .admin-showcase-stage {
    forced-color-adjust: none;
    background:
      radial-gradient(
        60% 45% at 50% 38%,
        var(--on-brand-glow),
        transparent 72%),
      linear-gradient(
        165deg,
        var(--brand-hover) 0%,
        var(--brand) 58%);
  }
}
.admin-showcase-demo {
  min-width: 0;
  margin-block: 1.5rem 0;
  padding: 0;
  border: 0;
}
.admin-showcase-demo legend {
  font-size: var(--text-lg);
  font-weight: 650;
}
.admin-showcase-demo-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  align-items: start;
  gap: var(--space-6);
  margin-top: var(--space-4);
}
.admin-showcase-demo-fields {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.admin-showcase-demo-examples.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  row-gap: var(--space-1);
  min-width: 0;
  margin: calc(var(--space-2) - var(--space-4)) 0 var(--space-4);
}
.admin-showcase-demo-examples > :not(input) {
  grid-column: 2;
  min-width: 0;
  margin: 0;
}
.admin-showcase-demo-examples-lead {
  font-weight: 600;
}
.admin-showcase-demo-examples > .admin-showcase-demo-examples-why {
  margin-top: var(--space-2);
}
.admin-showcase-demo input:is([readonly], :disabled):not([type=checkbox]):not([type=radio]):not([type=file]) {
  background: var(--disabled-ground);
  color: var(--disabled-ink);
}
.admin-showcase-demo-preview {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--brand);
  background-image:
    linear-gradient(
      175deg,
      var(--brand-hover) 0%,
      var(--brand) 46%);
}
.admin-showcase-demo-preview figcaption {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--white);
}
.admin-showcase-demo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-3);
}
.admin-showcase-demo-face {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
}
.admin-showcase-demo-face .admin-showcase-demo-subtitle {
  color: var(--on-brand-muted);
}
.admin-showcase-demo-face .notice {
  margin: 0;
}
.admin-showcase-demo-subtitle {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--leading-snug);
}
.admin-showcase-demo-card {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--white);
}
.admin-showcase-demo-code {
  width: min(100%, 8.5rem);
  aspect-ratio: 1;
  forced-color-adjust: none;
}
.admin-showcase-demo-code svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: none;
}
.admin-showcase-demo-caption {
  display: grid;
  gap: var(--space-1);
  text-align: center;
}
.admin-showcase-demo-payee {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
.admin-showcase-demo-check {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--muted);
}
.admin-showcase-demo-pending {
  font-size: var(--text-xs);
  color: var(--on-brand-accent);
}
.admin-showcase-demo-pictures {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.admin-showcase-demo-picture-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-showcase-demo-picture-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}
.admin-showcase-demo-picture-list li.is-match svg {
  color: var(--success);
}
.admin-showcase-demo-picture-list li.is-mismatch {
  color: var(--warning-ink);
}
.admin-showcase-demo-picture-name {
  font-weight: 600;
}
.admin-showcase-demo-command pre {
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: var(--text-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
  background: var(--surface-muted);
}
@media (max-width: 760px) {
  .admin-showcase-demo-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (forced-colors: active) {
  .admin-showcase-demo-preview {
    border: 1px solid CanvasText;
  }
}

/* src/brand.css */
.brand .brand-lockup {
  width: 188px;
  height: auto;
  aspect-ratio: 390.838 / 80;
  display: block;
}
@media (max-width: 820px) {
  .brand .brand-lockup {
    width: 164px;
  }
}
@media (max-width: 640px) {
  .brand .brand-lockup {
    width: clamp(100px, calc(100vw - 240px), 164px);
  }
}

/* src/readiness.css */
.client-form-gate {
  display: contents;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
button[data-client-action]:disabled {
  opacity: 0.65;
}
.client-readiness {
  margin-block: 0.75rem;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.client-readiness[data-state=failed] {
  padding: 1rem;
  border: 1px solid var(--error);
  border-radius: var(--control-radius);
  color: var(--ink);
  background: var(--white);
}
.client-readiness .button {
  margin-block-start: 0.75rem;
}
.client-startup-error {
  width: min(calc(100% - 2rem), 76rem);
  margin-inline: auto;
}
@media (scripting: none) {
  .client-readiness > :not(noscript),
  #handoff-status,
  #library-account,
  #account-content > [data-ui-text="session.checking"],
  [data-noscript-hide] {
    display: none;
  }
}

/* src/print-paper.css */
.print-preview-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.print-preview-heading h2 {
  margin: 0;
}
.print-preview-heading .dialog-close {
  flex: none;
}
@page qr-a2 {
  size: 420mm 594mm;
  margin: 8mm;
}
@page qr-a3 {
  size: 297mm 420mm;
  margin: 8mm;
}
@page qr-a4 {
  size: 210mm 297mm;
  margin: 8mm;
}
@page qr-a5 {
  size: 148mm 210mm;
  margin: 6mm;
}
@page qr-a6 {
  size: 105mm 148mm;
  margin: 5mm;
}
@page qr-photo {
  size: 100mm 150mm;
  margin: 5mm;
}
@media print {
  #print-root.paper-a2 {
    page: qr-a2;
    width: 404mm;
  }
  #print-root.paper-a3 {
    page: qr-a3;
    width: 281mm;
  }
  #print-root.paper-a4 {
    page: qr-a4;
    width: 194mm;
  }
  #print-root.paper-a5 {
    page: qr-a5;
    width: 136mm;
  }
  #print-root.paper-a6 {
    page: qr-a6;
    width: 95mm;
  }
  #print-root.paper-photo {
    page: qr-photo;
    width: 90mm;
  }
  #print-root[class*=paper-] {
    margin: 0;
    padding: 0;
  }
  #print-root[class*=paper-] .print-sheet {
    display: block;
    margin: 0;
    padding: 0;
  }
  #print-root[class*=paper-] .print-sheet + .print-sheet {
    break-before: page;
  }
  #print-root[class*=paper-] .print-card.identity-print {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    break-inside: avoid;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  #print-root[class*=paper-] .identity-print img {
    display: block;
    width: 100% !important;
    max-width: none;
    height: auto !important;
    margin: 0;
  }
}

/* src/print-studio.css */
.workspace.studio-workspace > .studio-sidebar,
.studio-sidebar > * {
  min-width: 0;
}
.studio-workspace[data-workbench-mode=qr] .studio-panel-tabs,
.studio-workspace[data-workbench-mode=qr] #studio-design,
.studio-workspace[data-workbench-mode=qr] #print-output,
.studio-workspace[data-workbench-mode=qr] .studio-print-only,
.studio-workspace[data-workbench-mode=qr] .studio-action-bar,
.studio-workspace[data-workbench-mode=print] .studio-qr-only,
.studio-workspace[data-workbench-mode=print] #qr-output,
.studio-workspace[data-workbench-mode=print][data-studio-panel=design] #studio-information,
.studio-workspace[data-workbench-mode=print][data-studio-panel=information] #studio-design {
  display: none;
}
.studio-workspace .studio-panel-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--ground);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.studio-panel-tabs button {
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--control-radius);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
}
.studio-panel-tabs button[aria-selected=true] {
  background: var(--white);
  color: var(--brand);
}
.studio-panel-tabs button:hover {
  color: var(--action);
}
.studio-workspace #card-settings {
  margin: 0;
  padding: 0;
  border: 0;
}
.studio-workspace .studio-card-options > summary {
  display: none;
}
.print-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}
.print-settings-grid .field {
  min-width: 0;
}
.studio-theme-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}
.studio-theme-choices > button {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: var(--text-xs);
  line-height: 1.4;
}
.studio-theme-choices > button[hidden] {
  display: none;
}
.studio-theme-art {
  display: grid;
  place-items: center;
  padding: 12px;
  height: 144px;
  background: var(--ground);
  border-radius: var(--radius);
}
.studio-theme-art img {
  display: block;
  width: auto;
  height: 120px;
  max-width: 100%;
  object-fit: contain;
}
.studio-theme-choices > button > span:last-of-type {
  display: block;
  min-height: 44px;
  padding: 10px 26px 8px 1px;
  overflow-wrap: anywhere;
}
.studio-theme-choices > button:hover .studio-theme-art {
  background: var(--surface-muted);
}
.studio-theme-choices > button[aria-pressed=true] {
  color: var(--action);
  font-weight: 600;
}
.studio-theme-check {
  display: none;
  position: absolute;
  bottom: 14px;
  right: 2px;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--action);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.studio-theme-choices > button[aria-pressed=true] .studio-theme-check {
  display: block;
}
.studio-design-fields {
  padding-top: 2px;
}
.studio-design-fields > .check {
  margin-top: 14px;
  font-size: var(--text-sm);
}
.studio-design-fields .studio-extra {
  margin-block: 18px;
}
.studio-design-fields .studio-extra > summary {
  padding-block: 14px;
}
.studio-workspace .studio-preview-pane {
  position: sticky;
  top: 24px;
  min-width: 0;
}
.studio-preview-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 18px;
}
.studio-preview-heading h2 {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.4;
}
.studio-preview-heading > span {
  font-size: var(--text-xs);
  color: var(--muted);
}
.studio-preview-stage {
  display: grid;
  place-items: center;
  min-height: 460px;
  padding: 30px;
  border-radius: var(--radius);
  background: var(--ground);
  overflow: hidden;
}
.studio-preview-stage > * {
  grid-area: 1 / 1;
  min-width: 0;
  width: 100%;
}
.studio-preview-stage .identity-preview:empty {
  display: none;
}
.studio-workspace #card-preview img {
  border: 0;
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin: auto;
  box-shadow: var(--shadow-1);
}
.studio-preview-status {
  margin-block: 14px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted);
}
.studio-preview-status.error {
  color: var(--error);
}
.studio-preview-pane .card-downloads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.studio-preview-pane .card-downloads > #print-card,
.studio-preview-pane .card-downloads > #copy-card-image {
  grid-column: 1 / -1;
}
#card-export-help {
  margin: 10px 0 0;
}
.studio-preview-pane .card-downloads .button {
  min-width: 0;
  padding-inline: 8px;
  font-size: var(--text-sm);
  white-space: normal;
}
#studio-enter-details:not([hidden]) {
  width: 100%;
  margin-bottom: 14px;
}
@media (min-width: 821px) {
  .studio-workspace[data-studio-panel=information] #studio-enter-details {
    display: none;
  }
}
.studio-preview-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}
.studio-preview-foot .text-button {
  font-size: var(--text-sm);
}
.studio-template-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin: -8px 0 18px;
  padding: 4px 4px 4px 14px;
  border-radius: var(--control-radius);
  background: var(--ground);
  font-size: var(--text-sm);
}
.studio-template-summary .text-button {
  min-height: 44px;
  padding-inline: 10px;
}
.studio-recovery:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 14px;
}
.studio-action-bar {
  display: none;
}
.print-background-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
@media (max-width: 1024px) {
  .studio-preview-stage {
    min-height: 400px;
    padding: 22px;
  }
}
@media (max-width: 820px) {
  .studio-workspace[data-workbench-mode=print] .studio-action-bar:not([hidden]) {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 24px -24px 0;
    padding: 10px 24px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-up);
  }
  .studio-action-status {
    flex: 1 1 11rem;
    min-width: 0;
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .studio-workspace[data-card-state=ready] .studio-action-status {
    color: var(--brand);
    font-weight: 600;
  }
  .studio-workspace[data-card-state=error] .studio-action-status {
    color: var(--error);
  }
  .studio-action-bar .button {
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 44px;
    padding-inline: 14px;
  }
  .studio-workspace[data-workbench-mode=print] .form-bottom > button[type=submit] {
    display: none;
  }
  html:has(.studio-workspace[data-workbench-mode=print]) {
    scroll-padding-bottom: 96px;
  }
  body:has(.studio-workspace[data-workbench-mode=print]) .toast {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .studio-theme-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .studio-theme-art {
    height: 165px;
  }
  .studio-theme-art img {
    height: 140px;
  }
}
@media (max-width: 480px) {
  .print-settings-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .studio-theme-choices {
    gap: 10px;
  }
  .studio-theme-art {
    height: 135px;
    padding: 10px;
  }
  .studio-theme-art img {
    height: 115px;
  }
  .studio-preview-stage {
    min-height: 340px;
    padding: 20px;
  }
}
@media (max-width: 480px) {
  .studio-workspace[data-workbench-mode=print] .studio-action-bar:not([hidden]) {
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .studio-preview-pane .card-downloads > .button {
    font-size: var(--text-sm);
  }
}
.studio-workspace #card-preview {
  margin: 0;
  max-width: 100%;
}
.studio-workspace .studio-preview-stage {
  min-height: 0;
  --studio-paper-w: 194;
  --studio-paper-h: 281;
  --studio-sheet-width: min(100%, 420px);
}
.studio-preview-stage[data-paper=a2] {
  --studio-paper-w: 404;
  --studio-paper-h: 578;
}
.studio-preview-stage[data-paper=a3] {
  --studio-paper-w: 281;
  --studio-paper-h: 404;
}
.studio-preview-stage[data-paper=a5] {
  --studio-paper-w: 136;
  --studio-paper-h: 198;
}
.studio-preview-stage[data-paper=a6] {
  --studio-paper-w: 95;
  --studio-paper-h: 138;
}
.studio-preview-stage[data-paper=photo] {
  --studio-paper-w: 90;
  --studio-paper-h: 140;
}
@media (min-width: 821px) {
  .studio-workspace .studio-preview-stage {
    --studio-sheet-width: min( 100%, 420px, max( 200px, calc((100vh - var(--studio-chrome, 500px)) * var(--studio-paper-w) / var(--studio-paper-h)) ) );
  }
}
@media (min-width: 821px) and (max-width: 1024px) {
  .studio-workspace .studio-preview-stage {
    --studio-chrome: 540px;
  }
}
.studio-preview-stage::before {
  content: "";
  grid-area: 1 / 1;
  width: var(--studio-sheet-width);
  aspect-ratio: var(--studio-paper-w) / var(--studio-paper-h);
}
.studio-workspace .studio-preview-stage > .print-frame {
  position: relative;
  width: var(--studio-sheet-width);
  height: 100%;
  margin: 0;
}
.studio-workspace .studio-preview-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}
#print-qr-feedback .validation-status:empty,
#print-qr-feedback .validation-status[data-status=ready] {
  display: none;
}
#print-qr-feedback .validation-status[data-status=error] {
  color: var(--error);
}
.print-customization {
  margin-block: 24px;
  min-width: 0;
}
.print-customization-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.print-customization-heading h3 {
  font-size: var(--text-sm);
  margin: 0;
}
.print-palettes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.print-palettes button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 8px;
  text-align: left;
  font-size: var(--text-xs);
  color: var(--ink);
  background: var(--ground);
  border: 0;
  border-radius: var(--control-radius);
  overflow-wrap: anywhere;
}
.print-palettes button[aria-pressed=true] {
  background: var(--selection);
  color: var(--brand);
  font-weight: 600;
}
.print-palette-swatch {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 2px;
  background: var(--palette-paper);
  border: 8px solid var(--palette-accent);
}
.print-color-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-block: 16px;
}
.print-color-controls label {
  display: flex;
  align-items: center;
  flex: 1 1 190px;
  min-width: 0;
  gap: 10px;
  font-size: var(--text-sm);
  font-weight: 600;
}
.print-color-controls input[type=color] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  flex: 0 0 44px;
  height: 44px;
  min-height: 44px;
  padding: 4px;
  border: 1px solid var(--input-line);
  border-radius: var(--control-radius);
  background: var(--white);
  cursor: pointer;
}
.print-color-controls input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.print-color-controls input[type=color]::-webkit-color-swatch {
  border: 0;
  border-radius: var(--radius-sm);
}
.print-color-controls input[type=color]::-moz-color-swatch {
  border: 0;
  border-radius: var(--radius-sm);
}
@media (max-width: 380px) {
  .print-palettes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* src/templates.css */
#merchant-kit:focus {
  outline: none;
}
.kit-jump > svg {
  flex: none;
}
.print-theme-gallery {
  margin-block: 0 var(--space-12);
}
.print-gallery-filters {
  margin: 0;
  padding: 0;
}
.print-gallery-caption {
  margin: var(--space-3) 0 var(--space-6);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}
.print-theme-list {
  --gallery-columns: 4;
  --gallery-gap: var(--space-6);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(8rem, (100% - (var(--gallery-columns) - 1) * var(--gallery-gap)) / var(--gallery-columns) - 0.1px)), 1fr));
  gap: var(--space-8) var(--gallery-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}
.print-theme-list > li {
  min-width: 0;
}
.print-theme-list > li[hidden] {
  display: none;
}
.print-theme-link {
  display: block;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-lg);
}
.print-theme-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.print-theme-sample {
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-8);
  background: var(--surface-output);
  border-radius: var(--radius-lg);
  transition: background-color var(--motion-fast) ease-out;
}
.print-theme-sample img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 194 / 281;
  object-fit: contain;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--motion-fast) ease-out;
}
.print-theme-link:hover .print-theme-sample {
  background: var(--selection);
}
.print-theme-link:hover .print-theme-sample img {
  box-shadow: var(--shadow-2);
}
.print-theme-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}
.print-theme-label > strong {
  min-width: 0;
  font-weight: 600;
}
.print-theme-label svg {
  flex: none;
  color: var(--action);
  transition: transform var(--motion-fast) ease-out;
}
.print-theme-link:hover .print-theme-label {
  color: var(--action);
}
.print-theme-link:hover .print-theme-label > strong {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.print-theme-link:hover .print-theme-label svg {
  transform: translateX(2px);
}
@media (max-width: 900px) {
  .print-theme-list {
    --gallery-columns: 3;
  }
}
@media (max-width: 640px) {
  .print-theme-list {
    --gallery-columns: 2;
    --gallery-gap: var(--space-4);
    row-gap: var(--space-6);
  }
  .print-theme-sample {
    padding: var(--space-4) var(--space-5);
  }
  .print-theme-label {
    font-size: var(--text-sm);
  }
}
@media (prefers-reduced-motion: reduce) {
  .print-theme-sample,
  .print-theme-sample img,
  .print-theme-label svg {
    transition: none;
  }
  .print-theme-link:hover .print-theme-label svg {
    transform: none;
  }
}
.single-templates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.single-templates > .single-template {
  flex: 1 1 calc((66rem - 100%) * 999);
}
.single-template {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-5);
  min-width: 0;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.single-template-art {
  display: grid;
  flex: 0 0 7rem;
  place-items: center;
  padding: var(--space-3);
  background: var(--surface-output);
  border-radius: var(--radius);
}
.single-template-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 194 / 281;
  box-shadow: var(--shadow-1);
}
.single-template-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  min-width: min(100%, 9rem);
}
.single-template-body h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}
.single-template-body p {
  margin: 0 0 var(--space-5);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.single-template-body .button {
  max-width: 100%;
  margin-top: auto;
}
@media (max-width: 1100px) {
  .single-template-art {
    flex-basis: 6.5rem;
  }
  .single-template-body .button {
    margin-top: 0;
  }
}
@media (max-width: 480px) {
  .single-template {
    gap: var(--space-4);
    padding: var(--space-4);
  }
  .single-template-art {
    flex-basis: 5rem;
    padding: var(--space-2);
  }
}
.kit-layout {
  display: grid;
  gap: var(--space-6);
}
.kit-layout > * {
  min-width: 0;
}
@media (min-width: 1025px) {
  .kit-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    grid-template-areas: "form preview";
    align-items: start;
  }
  .kit-form {
    grid-area: form;
  }
  .kit-preview {
    grid-area: preview;
    position: sticky;
    top: var(--space-6);
  }
}
.kit-preview {
  container: kit-preview / inline-size;
  padding: var(--space-5);
  background: var(--surface-output);
  border-radius: var(--radius-lg);
}
.kit-preview > h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
}
.kit-preview .kit-preview-caption {
  --cap-lines: 3;
  display: block;
  overflow: visible;
  -webkit-line-clamp: none;
  block-size: auto;
  min-block-size: calc(var(--cap-lines) * var(--leading-snug) * var(--text-sm));
  margin-bottom: var(--space-4);
}
@container kit-preview (max-width: 18rem) {
  .kit-preview .kit-preview-caption {
    --cap-lines: 4;
  }
}
.kit-sheet {
  padding: 22px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.kit-labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
}
.kit-label {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
  min-width: 0;
  padding: var(--space-3) 10px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  transition: opacity var(--motion-fast) ease-out;
}
.kit-label[data-fill=placeholder] {
  opacity: 0.46;
}
.kit-label-title {
  margin: 0;
  min-height: 2.6em;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.kit-label-qr {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--white);
}
.kit-label-qr > svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: none;
  border-radius: inherit;
}
.kit-labels {
  --print-illustration-skeleton: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2029%2029'%20shape-rendering%3D'crispEdges'%3E%3Cpath%20fill%3D'%23102a43'%20fill-opacity%3D'0.46'%20fill-rule%3D'evenodd'%20d%3D'M2%202h7v7h-7zM3%203v5h5v-5zM4%204h3v3h-3zM20%202h7v7h-7zM21%203v5h5v-5zM22%204h3v3h-3zM2%2020h7v7h-7zM3%2021v5h5v-5zM4%2022h3v3h-3zM18%2018h5v5h-5zM19%2019v3h3v-3z%20M20%2020h1v1h-1z'%2F%3E%3Cpath%20fill%3D'%23102a43'%20fill-opacity%3D'0.22'%20d%3D'M2%2010h1v1h-1zM2%2011h1v1h-1zM2%2013h1v1h-1zM2%2016h1v1h-1zM2%2018h1v1h-1zM3%2011h1v1h-1zM3%2012h1v1h-1zM3%2015h1v1h-1zM3%2016h1v1h-1zM4%2013h1v1h-1zM4%2015h1v1h-1zM4%2016h1v1h-1zM4%2017h1v1h-1zM4%2018h1v1h-1zM5%2011h1v1h-1zM5%2016h1v1h-1zM5%2017h1v1h-1zM5%2018h1v1h-1zM6%2012h1v1h-1zM6%2015h1v1h-1zM6%2018h1v1h-1zM7%2014h1v1h-1zM7%2016h1v1h-1zM8%2010h1v1h-1zM8%2012h1v1h-1zM8%2014h1v1h-1zM8%2016h1v1h-1zM8%2018h1v1h-1zM9%2010h1v1h-1zM9%2012h1v1h-1zM9%2017h1v1h-1zM10%208h1v1h-1zM10%2010h1v1h-1zM10%2015h1v1h-1zM10%2018h1v1h-1zM10%2020h1v1h-1zM10%2021h1v1h-1zM10%2022h1v1h-1zM10%2024h1v1h-1zM10%2025h1v1h-1zM11%203h1v1h-1zM11%2010h1v1h-1zM11%2015h1v1h-1zM11%2016h1v1h-1zM11%2017h1v1h-1zM11%2018h1v1h-1zM11%2021h1v1h-1zM11%2022h1v1h-1zM12%206h1v1h-1zM12%208h1v1h-1zM12%2014h1v1h-1zM12%2016h1v1h-1zM12%2017h1v1h-1zM12%2018h1v1h-1zM12%2019h1v1h-1zM12%2021h1v1h-1zM12%2022h1v1h-1zM12%2023h1v1h-1zM12%2024h1v1h-1zM12%2026h1v1h-1zM13%204h1v1h-1zM13%205h1v1h-1zM13%209h1v1h-1zM13%2014h1v1h-1zM13%2015h1v1h-1zM13%2017h1v1h-1zM13%2019h1v1h-1zM13%2020h1v1h-1zM13%2023h1v1h-1zM13%2025h1v1h-1zM14%205h1v1h-1zM14%207h1v1h-1zM14%208h1v1h-1zM14%2012h1v1h-1zM14%2013h1v1h-1zM14%2020h1v1h-1zM14%2023h1v1h-1zM14%2024h1v1h-1zM14%2025h1v1h-1zM14%2026h1v1h-1zM15%2010h1v1h-1zM15%2011h1v1h-1zM15%2012h1v1h-1zM15%2013h1v1h-1zM15%2020h1v1h-1zM15%2026h1v1h-1zM16%203h1v1h-1zM16%208h1v1h-1zM16%2011h1v1h-1zM16%2012h1v1h-1zM16%2013h1v1h-1zM16%2016h1v1h-1zM16%2022h1v1h-1zM16%2023h1v1h-1zM17%206h1v1h-1zM17%207h1v1h-1zM17%209h1v1h-1zM17%2010h1v1h-1zM17%2012h1v1h-1zM17%2014h1v1h-1zM17%2025h1v1h-1zM18%202h1v1h-1zM18%203h1v1h-1zM18%205h1v1h-1zM18%208h1v1h-1zM18%2010h1v1h-1zM18%2014h1v1h-1zM18%2016h1v1h-1zM18%2017h1v1h-1zM20%2011h1v1h-1zM20%2015h1v1h-1zM20%2016h1v1h-1zM20%2023h1v1h-1zM20%2024h1v1h-1zM20%2025h1v1h-1zM21%2012h1v1h-1zM21%2015h1v1h-1zM21%2023h1v1h-1zM22%2012h1v1h-1zM22%2015h1v1h-1zM22%2016h1v1h-1zM22%2017h1v1h-1zM22%2024h1v1h-1zM23%2010h1v1h-1zM23%2011h1v1h-1zM23%2014h1v1h-1zM23%2018h1v1h-1zM23%2019h1v1h-1zM23%2020h1v1h-1zM23%2022h1v1h-1zM23%2023h1v1h-1zM24%2010h1v1h-1zM24%2011h1v1h-1zM24%2015h1v1h-1zM24%2016h1v1h-1zM24%2019h1v1h-1zM24%2023h1v1h-1zM24%2025h1v1h-1zM25%2011h1v1h-1zM25%2014h1v1h-1zM25%2015h1v1h-1zM25%2017h1v1h-1zM25%2018h1v1h-1zM25%2019h1v1h-1zM25%2020h1v1h-1zM25%2021h1v1h-1zM25%2022h1v1h-1zM25%2023h1v1h-1zM25%2025h1v1h-1zM26%2010h1v1h-1zM26%2012h1v1h-1zM26%2013h1v1h-1zM26%2014h1v1h-1zM26%2017h1v1h-1zM26%2020h1v1h-1z'%2F%3E%3C%2Fsvg%3E");
}
.kit-labels[data-state=illustration] .kit-label-qr {
  background: var(--white) var(--print-illustration-skeleton) center / 82% no-repeat;
}
.kit-label-qr > .qr-skeleton {
  border-radius: inherit;
}
.kit-label-qr .qr-skeleton-plate {
  box-sizing: border-box;
  max-inline-size: calc(100% - 8px);
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.kit-label dl {
  display: grid;
  gap: 6px;
  margin: 0;
}
.kit-label dl > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.kit-label dt {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}
.kit-label dd {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.kit-label dd[data-fill=placeholder] {
  opacity: 0.46;
}
.kit-bar {
  display: block;
  width: 64%;
  height: 0.58em;
  margin-block: 0.385em;
  border-radius: var(--radius-pill);
  background: rgb(21 47 63 / 15%);
}
.kit-bar-long {
  width: 86%;
}
.kit-bar-short {
  width: 48%;
}
@container kit-preview (max-width: 18rem) {
  .kit-labels:not([data-state=example]) .kit-label dl > div:not(:first-child),
  .kit-labels:not([data-state=example]) .kit-label dt {
    display: none;
  }
  .kit-label dd {
    font-size: 10px;
  }
}
@container kit-preview (max-width: 22rem) {
  .kit-label {
    padding: 10px 6px;
  }
}
.kit-sheet-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: 11px;
}
.kit-sheet-foot img {
  flex: none;
  width: 68px;
  height: auto;
}
.kit-paper-note {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  text-align: center;
}
.kit-contents {
  margin: var(--space-2) 0 var(--space-6);
}
.kit-contents > legend {
  margin-bottom: var(--space-1);
  padding: 0;
  font-size: var(--text-md);
  font-weight: 600;
}
.kit-contents > .field-error {
  margin: 0 0 var(--space-3);
}
.kit-contents-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6);
  margin-top: var(--space-4);
}
.kit-contents-grid > .field {
  min-width: 0;
}
.kit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.kit-actions .kit-status {
  flex: 1 1 18rem;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.kit-actions .kit-status.error {
  color: var(--error);
}
@media (max-width: 1024px) {
  .kit-preview {
    max-width: 36rem;
  }
  .kit-sheet {
    padding: var(--space-4);
  }
}
@media (max-width: 640px) {
  .kit-contents-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .kit-preview {
    padding: var(--space-4);
  }
  .kit-sheet {
    padding: var(--space-3);
  }
  .kit-labels {
    gap: var(--space-2);
  }
  .kit-sheet-foot {
    display: none;
  }
  .kit-actions .button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kit-label {
    transition: none;
  }
}

/* src/print-preview.css */
.print-frame > .preview-content {
  position: absolute;
  inset: 0;
}
.print-frame > .preview-content > #card-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.print-frame[data-state=ready] > .preview-content:has(> #card-preview img) > .print-sheet-box {
  visibility: hidden;
}
.print-frame svg {
  pointer-events: none;
}
.print-sheet-box {
  position: relative;
  width: 100%;
  background: var(--white);
  box-shadow: var(--shadow-1);
}
.print-sheet-box > svg {
  display: block;
  width: 100%;
  height: auto;
}
.print-sheet-box:not(:has(> svg)) {
  aspect-ratio: var(--studio-paper-w) / var(--studio-paper-h);
}
.print-sheet-box[data-loading]::after,
.print-sheet-box[data-failed]::after {
  content: "";
  position: absolute;
  inset: 26% 27% auto;
  aspect-ratio: 1;
  background: var(--qr-skeleton-image) center / 100% no-repeat;
}
.print-slot {
  position: absolute;
  pointer-events: none;
}
.preview-copy > .print-sheet-box {
  width: 100%;
}
.preview-copy > img {
  box-shadow: none;
}
.studio-workspace > #print-output {
  container: print-pane / inline-size;
}
.studio-workspace #print-output .studio-preview-heading {
  margin-bottom: 0;
}
.studio-workspace #print-output .print-caption {
  --cap-lines: 3;
  margin: var(--space-1) 0 var(--space-4);
}
.studio-workspace #print-output[data-transfer-example] .print-caption {
  --cap-lines: 4;
}
@container print-pane (width < 20em) {
  .studio-workspace #print-output .print-caption {
    --cap-lines: 4;
  }
  .studio-workspace #print-output[data-transfer-example] .print-caption {
    --cap-lines: 5;
  }
}
@container print-pane (width < 16em) {
  .studio-workspace #print-output .print-caption,
  .studio-workspace #print-output[data-transfer-example] .print-caption {
    --cap-lines: 7;
  }
}
.studio-workspace:is([data-print-preview=draft], [data-print-preview=ready]):is([data-card-state=empty], [data-card-state=pending], [data-card-state=ready]) #card-status:not(.error) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.studio-workspace:is([data-print-preview=draft], [data-print-preview=ready]):is([data-card-state=empty], [data-card-state=pending], [data-card-state=ready]) #print-output:has(> #card-status:not(.error)) > .studio-preview-stage {
  margin-bottom: var(--space-5);
}
.studio-workspace:is([data-print-preview=example], [data-print-preview=illustration], [data-print-preview=draft]) #print-output :is(.card-downloads, #card-export-help, #save-qr-print) {
  display: none;
}
.studio-workspace:is([data-print-preview=example], [data-print-preview=illustration]) #print-output .studio-preview-foot {
  display: none;
}
.studio-workspace > .studio-sidebar {
  --flow-pad: var(--creator-pad);
}
.studio-sidebar > :is(.print-intro, .preview-lens) {
  border-radius: 0 calc(var(--radius-lg) - 1px) 0 0;
}
.studio-sidebar > .print-intro > .preview-caption {
  --cap-lines: 4;
}
@container preview-intro (width >= 36em) {
  .studio-sidebar > .print-intro > .preview-caption {
    --cap-lines: 3;
  }
}
@container preview-intro (width < 16em) {
  .studio-sidebar > .print-intro > .preview-caption {
    --cap-lines: 7;
  }
}
@container preview-intro (16em <= width < 18em) {
  .studio-workspace:has(> #print-output[data-transfer-example]) > .studio-sidebar > .print-intro > .preview-caption {
    --cap-lines: 5;
  }
}
.print-intro .preview-mini {
  border-radius: 3px;
  background: var(--white);
}
.print-intro .preview-intro-body {
  flex-wrap: wrap;
}
.print-intro .preview-intro-side {
  flex: 0 0 auto;
  width: 6.25rem;
}
.print-intro-sheet {
  width: 200px;
  aspect-ratio: 194 / 287;
  background: var(--white) var(--qr-skeleton-image) center 38% / 52% no-repeat;
}
.print-intro-sheet[data-paper=photo] {
  aspect-ratio: 90 / 145;
}
@media (max-width: 374px) {
  .print-intro-sheet {
    width: 160px;
  }
}
.studio-workspace[data-workbench-mode=qr] .studio-sidebar > :is(.print-intro, .preview-lens) {
  display: none;
}
@media (max-width: 480px) {
  .studio-sidebar > :is(.print-intro, .preview-lens) {
    margin-top: calc(-1 * var(--space-5));
    border-radius: 0;
  }
}

/* src/logo-editor.css */
.logo-editor {
  min-width: 0;
  padding-block: 8px 20px;
}
.logo-editor-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.logo-editor-heading h3 {
  margin: 0;
  font-size: var(--text-md);
}
.logo-editor input[type=file] {
  width: 100%;
  min-width: 0;
  font-size: var(--text-sm);
}
.logo-preview {
  display: grid;
  place-items: center;
  min-height: 112px;
  margin-block: 16px 4px;
  padding: 14px;
  background-color: var(--surface-output);
  background-image:
    conic-gradient(
      var(--white) 25%,
      transparent 0 50%,
      var(--white) 0 75%,
      transparent 0);
  background-size: 16px 16px;
  border-radius: var(--control-radius);
}
.logo-preview img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 112px;
  object-fit: contain;
}
.logo-editor-actions {
  display: flex;
  align-items: center;
  gap: 4px 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.logo-editor .text-button {
  min-height: 44px;
  text-align: start;
  white-space: normal;
}
.logo-save-row {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}
.logo-save-row .field {
  flex: 1 1 160px;
  margin: 0;
  min-width: 0;
}
.logo-save-row .button {
  margin: 0;
}
.logo-editor .field-help:empty {
  display: none;
}
.logo-library {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.logo-library-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.logo-library-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-block: 8px;
}
.logo-library-choice {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 52px;
  padding: 8px;
  text-align: start;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--control-radius);
  overflow-wrap: anywhere;
  font-weight: 600;
}
.logo-library-choice:hover,
.logo-library-choice[aria-pressed=true] {
  background: var(--selection);
}
.logo-library-dimensions {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 400;
}
.logo-delete {
  color: var(--error);
}
.logo-delete-confirm {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px;
  background: var(--ground);
}
.logo-delete-confirm p {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--text-sm);
}
@media (max-width: 480px) {
  .logo-editor-heading {
    align-items: start;
  }
  .logo-save-row > .button {
    width: 100%;
  }
}
.logo-library-choice {
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.logo-library-label {
  min-width: 0;
}
.logo-library-dimensions {
  display: block;
}
.logo-library-thumb {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 4px;
  background: var(--white);
  border-radius: var(--control-radius);
}
.logo-library-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.logo-library-thumb svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
}
#logo-choose {
  gap: 8px;
}
#logo-choose svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 640px) {
  .logo-library-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .logo-delete {
    justify-self: end;
  }
}

/* src/ocop-editor.css */
.ocop-fields {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ocop-editor .print-settings-grid {
  margin-block: 0;
}
.ocop-editor .check {
  align-items: start;
}
.ocop-editor .check input {
  flex-shrink: 0;
  margin-block-start: 0.35em;
}
.ocop-editor .field-help:empty {
  display: none;
}
@media (max-width: 640px) {
  .ocop-editor .print-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 380px) {
  #ocop-validUntil {
    padding-inline: max(10px, 0.35rem);
  }
}

/* src/bio-public.css */
.bio-profile-page,
.bio-public-look {
  min-width: 0;
  background: var(--profile-surface, var(--ground));
  color: var(--profile-text, var(--ink));
}
.bio-profile-page #main,
.bio-public-look .bio-profile-main {
  width: calc(100% - 2 * var(--page-gutter));
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 0 32px;
}
.bio-profile-canvas {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
}
.bio-public-look .bio-public-layout {
  display: block;
  max-width: none;
  margin: 0;
}
.bio-profile-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: calc(100% - 2 * var(--page-gutter));
  max-width: 44rem;
  min-height: 72px;
  margin: 0 auto;
}
.bio-profile-actions :is(.bio-profile-share, .bio-profile-language) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--profile-text, var(--ink));
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: normal;
  text-decoration: none;
}
.bio-profile-actions .bio-profile-language::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--shell-mask-globe) center / 18px no-repeat;
  mask: var(--shell-mask-globe) center / 18px no-repeat;
  forced-color-adjust: none;
}
@media (forced-colors: active) {
  .bio-profile-actions .bio-profile-language::before {
    background-color: LinkText;
  }
}
.bio-profile-actions :is(.bio-profile-share, .bio-profile-language):hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: var(--profile-text, var(--ink));
  text-decoration: none;
}
.bio-profile-actions svg,
.bio-profile-sharing > summary svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bio-public-look :is(#bio-public-card, #bio-preview) > .bio-card {
  box-shadow: none;
  border-radius: 16px;
}
.bio-profile-page .bio-card[data-organization=""]:not([data-theme=bank]) {
  --bio-primary: var(--profile-primary, #175cd3);
  --bio-on-primary: var(--profile-on-primary, #fff);
  --bio-accent: var(--profile-primary, #175cd3);
}
.bio-public-look :is(#bio-public-card, #bio-preview) .bio-avatar {
  container-type: inline-size;
}
.bio-public-look :is(#bio-public-card, #bio-preview) .bio-avatar span {
  font-size: 20px;
  font-size: min(1.5rem, 40cqw);
  line-height: 1;
}
.bio-public-look .bio-card-foot {
  display: none;
}
.bio-public-look .bio-person-name,
.bio-public-look .bio-card-body,
.bio-public-look .bio-contact-action,
.bio-public-look .bio-card-links a > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.bio-public-look .bio-card:not([data-theme=bank]) .bio-person :is(h1, h3) {
  font-size: clamp(1.875rem, 4.5vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
}
@supports (container-type: inline-size) {
  @container public-frame (max-width: 666px) {
    .bio-public-look .bio-card:not([data-theme=bank]) .bio-person :is(h1, h3) {
      font-size: 1.875rem;
    }
  }
}
.bio-public-look .bio-description {
  font-size: var(--text-md);
  line-height: 1.75;
}
.bio-public-look .bio-save-contact {
  min-height: 48px;
  font-size: var(--text-md);
}
.bio-public-look .bio-contact-action {
  min-height: 60px;
}
.bio-public-look .bio-contact-action strong,
.bio-public-look .bio-card-links a {
  font-size: 0.9375rem;
}
.bio-public-look .bio-office div {
  font-size: var(--text-sm);
}
.bio-public-look .bio-card-links a {
  min-height: 52px;
}
.bio-public-look .bio-card:not([data-theme=bank]):not([data-layout-mode=shared]) .bio-contact-actions {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.bio-public-look .bio-card:not([data-theme=bank]):not([data-layout-mode=shared]) .bio-contact-action {
  padding: 16px 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.bio-public-look .bio-card:not([data-theme=bank]):not([data-layout-mode=shared]) .bio-contact-action:last-child {
  border-bottom: 0;
}
.bio-public-look .bio-card:not([data-theme=bank]):not([data-layout-mode=shared]) .bio-contact-action span {
  font-size: 0.8125rem;
}
.bio-profile-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.bio-profile-status {
  margin: 0 0 16px;
  font-size: var(--text-md);
}
.bio-profile-reload {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 16px;
}
.bio-profile-sharing {
  margin-top: 24px;
  padding: 0 24px;
  background: var(--white);
  border-radius: var(--radius-lg);
}
.bio-profile-sharing > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
}
.bio-profile-sharing > summary::-webkit-details-marker {
  display: none;
}
.bio-profile-sharing[open] > summary svg {
  transform: rotate(180deg);
}
.bio-public-look .bio-public-tools {
  display: block;
  padding: 0 0 var(--space-6);
  container: bio-share / inline-size;
}
.bio-public-look .bio-public-tools .bio-qr-preview {
  width: 180px;
  height: 180px;
  min-height: 180px;
  max-width: 100%;
  display: grid;
  place-items: center;
  background: var(--white);
  margin: var(--space-3) auto var(--space-4);
}
.bio-public-look .bio-public-tools .image-export-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
}
@container bio-share (max-width: 24rem) {
  .bio-public-look .bio-public-tools .image-export-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bio-public-look .bio-public-tools .button {
  min-width: 0;
  min-height: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.bio-public-look .bio-public-share-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 10px;
}
.bio-public-look .bio-public-copy-status:empty,
.bio-public-look .bio-public-qr-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.bio-public-look .bio-public-qr-status {
  text-align: center;
}
.bio-public-look .bio-public-qr-status.error {
  color: var(--error, var(--error));
}
.bio-public-look #bio-public-qr-retry {
  display: flex;
  margin: 0 auto 16px;
  min-height: 44px;
}
.bio-public-look #bio-public-qr-retry[hidden] {
  display: none;
}
.bio-qr-preparing {
  color: var(--muted, var(--muted));
  font-size: var(--text-sm);
  line-height: 1.5;
  text-align: center;
}
.bio-public-look .bio-public-utilities {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  margin-top: 12px;
}
.bio-public-look .bio-public-report {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  color: var(--profile-text, var(--muted));
  font-size: var(--text-xs);
}
.bio-public-look .bio-public-report > summary {
  width: fit-content;
  min-height: 44px;
  margin-inline: auto;
  padding: 12px 0;
  text-underline-offset: 0.25em;
}
.bio-public-look .bio-public-report[open] > summary {
  margin-bottom: 8px;
}
.bio-public-look .bio-public-report .field {
  font-size: var(--text-md);
}
.bio-public-look :is(a, button, summary, select, textarea):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
}
.bio-public-look ::selection {
  background: var(--profile-primary, var(--action));
  color: var(--profile-on-primary, var(--white));
}
@media (max-width: 480px) {
  .bio-profile-actions {
    min-height: 60px;
  }
  .bio-profile-sharing {
    padding-inline: 20px;
  }
  .bio-public-look .bio-contact-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .bio-public-look .bio-office div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}
@supports (container-type: inline-size) {
  @container public-frame (max-width: 480px) {
    .bio-profile-actions {
      min-height: 60px;
    }
    .bio-profile-sharing {
      padding-inline: 20px;
    }
    .bio-public-look .bio-contact-actions {
      grid-template-columns: minmax(0, 1fr);
    }
    .bio-public-look .bio-office div {
      grid-template-columns: minmax(0, 1fr);
      gap: 4px;
    }
  }
}
@media print {
  .bio-public-look :is(.bio-profile-actions, .bio-profile-sharing, .bio-public-report) {
    display: none;
  }
}
.bio-profile-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  width: calc(100% - 2 * var(--page-gutter));
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 0 32px;
  color: var(--profile-text, var(--muted));
  font-size: var(--text-xs);
  line-height: 1.6;
}
.bio-profile-notice {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
}
.bio-profile-credit a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.bio-profile-credit a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.bio-profile-credit-brand img {
  width: 98px;
  height: 20px;
  object-fit: contain;
}
.bio-profile-credit .bio-profile-credit-banker .banker-wordmark {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.bio-profile-credit .bio-profile-credit-banker .banker-wordmark-dot {
  color: inherit;
}
.bio-public-look .unavailable-card.bio-unavailable {
  margin-top: var(--space-4);
}

/* src/bank-app-picker.css */
.bank-app-dialog[open] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(32rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-3);
}
.bank-app-dialog::backdrop {
  background: #102a4360;
}
.bank-app-header,
.bank-app-tools,
.bank-app-footer {
  padding-inline: 1.25rem;
}
.bank-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.75rem;
}
.bank-app-header h2 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.3;
}
.bank-app-header h2:focus {
  outline: none;
}
.bank-app-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
}
.bank-app-close:hover,
.bank-app-row:hover {
  background: var(--surface-output);
}
.bank-app-tools {
  padding-bottom: 0.75rem;
}
.bank-app-tools p,
.bank-app-footer p,
.bank-app-empty {
  margin: 0.25rem 0 0.65rem;
  color: var(--muted);
  font-size: var(--text-sm);
}
.bank-app-tools input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--input-line);
  border-radius: var(--control-radius);
  background: var(--white);
  font: inherit;
}
.bank-app-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-block-start: 0.5rem;
}
.bank-app-filters button {
  min-height: 44px;
  padding: 0.375rem 0.625rem;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
}
.bank-app-filters button[aria-pressed=true] {
  background: var(--selection);
  color: #154690;
  font-weight: 600;
}
.bank-app-results {
  min-height: 0;
  padding: 0 1rem 0.625rem;
  overflow: auto;
  overscroll-behavior: contain;
}
.bank-app-results h3 {
  margin: 0.65rem 0.25rem 0.25rem;
  font-size: var(--text-sm);
  color: var(--muted);
}
.bank-app-results ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bank-app-results li + li {
  border-top: 1px solid var(--line);
}
.bank-app-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  min-height: 52px;
  padding: 0.5rem 0.25rem;
  color: var(--ink);
  border-radius: var(--control-radius);
  text-decoration: none;
}
.bank-app-row:focus-visible {
  outline-offset: -2px;
}
.bank-app-mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 1.5rem;
}
.bank-app-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bank-app-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.bank-app-name strong,
.bank-app-name small {
  display: block;
}
.bank-app-name strong {
  font-size: var(--text-md);
}
.bank-app-name small {
  color: var(--muted);
  font-size: var(--text-xs);
}
.bank-app-footer {
  padding-block: 0.625rem max(0.625rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.bank-app-footer a,
.bank-app-qr {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.bank-app-footer a {
  margin-inline-end: 0.875rem;
}
.bank-app-qr {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--action);
  font-weight: 600;
}
@media (max-width: 640px) {
  .bank-app-dialog[open] {
    width: 100%;
    max-width: 100%;
    max-height: min(38rem, calc(100dvh - 1rem));
    margin: auto 0 0;
    border-radius: 14px 14px 0 0;
  }
}
@media (max-height: 420px) {
  .bank-app-dialog[open] {
    display: block;
    overflow: auto;
  }
  .bank-app-results {
    max-height: 45dvh;
  }
}
.bank-app-support-note {
  margin: 0 0.25rem 0.5rem;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.bank-app-results li {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bank-app-results li > .bank-app-row {
  flex: 1 1 auto;
  min-width: 0;
}
.bank-app-results li[hidden] {
  display: none;
}
.bank-app-name .bank-app-manual {
  color: #8a4b08;
}
.bank-app-name .bank-app-pin {
  display: inline-block;
  margin: 2px 0;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--selection);
  color: var(--brand);
  font-size: var(--text-xs);
  font-weight: 600;
}
.bank-app-forget {
  flex: none;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bank-app-footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
}
.bank-app-footer-actions > a[hidden] {
  display: none;
}

/* src/styles/tokens-base.css */
@font-face {
  font-family: Be Vietnam Pro;
  src: url(/fonts/be-vietnam-pro-regular.woff2?v=DzO8EzFTjzbkkIgdHeF8Wxkpp-LJSj14xNZ5ZF9xeko) format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Be Vietnam Pro;
  src: url(/fonts/be-vietnam-pro-semibold.woff2?v=Su7UEJYgvjOMqHUSyrMvkcmLrYQJzud-EpuMQxznEco) format("woff2");
  font-weight: 600 800;
  font-display: swap;
}
:root {
  --ink: #182b42;
  --muted: #52647a;
  --brand: #102a43;
  --action: #175cd3;
  --action-hover: #124aaa;
  --selection: #e4edfc;
  --ground: #f5f7fa;
  --line: #d5dee9;
  --input-line: #7a8ca2;
  --white: #fff;
  --surface-output: #eef3f9;
  --surface-muted: #edf2f7;
  --on-brand-muted: #d6e2f3;
  --brand-hover: #203e5c;
  --on-brand-hover: rgb(255 255 255 / 8%);
  --brand-current: #2a4a6b;
  --brand-line: #6682a0;
  --success: #18704a;
  --success-ground: #eef7f2;
  --warning: #fff4db;
  --warning-ink: #654916;
  --warning-line: #e9d6a6;
  --error: #b42318;
  --error-ground: #fff1f0;
  --error-line: #e7b0ac;
  --focus: #175cd3;
  --focus-on-brand: #8ab4ff;
  --on-brand-accent: #a4c3fa;
  --on-brand-subtle: #9faec2;
  --on-brand-glow: rgb(138 180 255 / 20%);
  --on-brand-hairline: rgb(255 255 255 / 8%);
  --on-brand-shade: rgb(4 14 28 / 50%);
  --disabled-ground: #e5eaf0;
  --disabled-ink: #627287;
  --radius: 10px;
  --donate: #b23644;
  --control-radius: 6px;
  --section-gap: 24px;
  --control-time: 120ms;
  --surface: var(--white);
  --error-hover: #8f1b12;
  --backdrop: rgb(16 42 67 / 40%);
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.3125rem;
  --text-2xl: 1.5rem;
  --text-h1: clamp(1.625rem, 1.25rem + 1.2vw, 1.9375rem);
  --leading-tight: 1.3;
  --leading-snug: 1.45;
  --leading-body: 1.6;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-1: 0 3px 12px rgb(16 42 67 / 10%);
  --shadow-2: 0 8px 24px rgb(16 42 67 / 15%);
  --shadow-3: 0 16px 54px rgb(16 42 67 / 19%);
  --shadow-up: 0 -6px 18px rgb(16 42 67 / 12%);
  --shadow-card: 0 1px 2px rgb(16 42 67 / 4%), 0 18px 40px -28px rgb(16 42 67 / 22%);
  --z-raised: 1;
  --z-sticky: 25;
  --z-overlay: 100;
  --container: 78.75rem;
  --container-tool: 63.75rem;
  --container-reading: 47.5rem;
  --page-gutter: 32px;
  --header-height: 64px;
  --toast-lift: 0px;
  --sticky-bar-h: 0px;
  --preview-lens-h: 0px;
  --preview-screen-w: 390px;
  --preview-screen-radius: 28px;
  --qr-skeleton-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29' shape-rendering='crispEdges'%3E%3Cpath fill='%23102a43' fill-opacity='.11' fill-rule='evenodd' d='M2 2h7v7h-7zM3 3v5h5v-5zM4 4h3v3h-3zM20 2h7v7h-7zM21 3v5h5v-5zM22 4h3v3h-3zM2 20h7v7h-7zM3 21v5h5v-5zM4 22h3v3h-3zM18 18h5v5h-5zM19 19v3h3v-3z M20 20h1v1h-1z'/%3E%3Cpath fill='%23102a43' fill-opacity='.08' d='M2 10h1v1h-1zM2 11h1v1h-1zM2 13h1v1h-1zM2 16h1v1h-1zM2 18h1v1h-1zM3 11h1v1h-1zM3 12h1v1h-1zM3 15h1v1h-1zM3 16h1v1h-1zM4 13h1v1h-1zM4 15h1v1h-1zM4 16h1v1h-1zM4 17h1v1h-1zM4 18h1v1h-1zM5 11h1v1h-1zM5 16h1v1h-1zM5 17h1v1h-1zM5 18h1v1h-1zM6 12h1v1h-1zM6 15h1v1h-1zM6 18h1v1h-1zM7 14h1v1h-1zM7 16h1v1h-1zM8 10h1v1h-1zM8 12h1v1h-1zM8 14h1v1h-1zM8 16h1v1h-1zM8 18h1v1h-1zM9 10h1v1h-1zM9 12h1v1h-1zM9 17h1v1h-1zM10 8h1v1h-1zM10 10h1v1h-1zM10 15h1v1h-1zM10 18h1v1h-1zM10 20h1v1h-1zM10 21h1v1h-1zM10 22h1v1h-1zM10 24h1v1h-1zM10 25h1v1h-1zM11 3h1v1h-1zM11 10h1v1h-1zM11 15h1v1h-1zM11 16h1v1h-1zM11 17h1v1h-1zM11 18h1v1h-1zM11 21h1v1h-1zM11 22h1v1h-1zM12 6h1v1h-1zM12 8h1v1h-1zM12 14h1v1h-1zM12 16h1v1h-1zM12 17h1v1h-1zM12 18h1v1h-1zM12 19h1v1h-1zM12 21h1v1h-1zM12 22h1v1h-1zM12 23h1v1h-1zM12 24h1v1h-1zM12 26h1v1h-1zM13 4h1v1h-1zM13 5h1v1h-1zM13 9h1v1h-1zM13 14h1v1h-1zM13 15h1v1h-1zM13 17h1v1h-1zM13 19h1v1h-1zM13 20h1v1h-1zM13 23h1v1h-1zM13 25h1v1h-1zM14 5h1v1h-1zM14 7h1v1h-1zM14 8h1v1h-1zM14 12h1v1h-1zM14 13h1v1h-1zM14 20h1v1h-1zM14 23h1v1h-1zM14 24h1v1h-1zM14 25h1v1h-1zM14 26h1v1h-1zM15 10h1v1h-1zM15 11h1v1h-1zM15 12h1v1h-1zM15 13h1v1h-1zM15 20h1v1h-1zM15 26h1v1h-1zM16 3h1v1h-1zM16 8h1v1h-1zM16 11h1v1h-1zM16 12h1v1h-1zM16 13h1v1h-1zM16 16h1v1h-1zM16 22h1v1h-1zM16 23h1v1h-1zM17 6h1v1h-1zM17 7h1v1h-1zM17 9h1v1h-1zM17 10h1v1h-1zM17 12h1v1h-1zM17 14h1v1h-1zM17 25h1v1h-1zM18 2h1v1h-1zM18 3h1v1h-1zM18 5h1v1h-1zM18 8h1v1h-1zM18 10h1v1h-1zM18 14h1v1h-1zM18 16h1v1h-1zM18 17h1v1h-1zM20 11h1v1h-1zM20 15h1v1h-1zM20 16h1v1h-1zM20 23h1v1h-1zM20 24h1v1h-1zM20 25h1v1h-1zM21 12h1v1h-1zM21 15h1v1h-1zM21 23h1v1h-1zM22 12h1v1h-1zM22 15h1v1h-1zM22 16h1v1h-1zM22 17h1v1h-1zM22 24h1v1h-1zM23 10h1v1h-1zM23 11h1v1h-1zM23 14h1v1h-1zM23 18h1v1h-1zM23 19h1v1h-1zM23 20h1v1h-1zM23 22h1v1h-1zM23 23h1v1h-1zM24 10h1v1h-1zM24 11h1v1h-1zM24 15h1v1h-1zM24 16h1v1h-1zM24 19h1v1h-1zM24 23h1v1h-1zM24 25h1v1h-1zM25 11h1v1h-1zM25 14h1v1h-1zM25 15h1v1h-1zM25 17h1v1h-1zM25 18h1v1h-1zM25 19h1v1h-1zM25 20h1v1h-1zM25 21h1v1h-1zM25 22h1v1h-1zM25 23h1v1h-1zM25 25h1v1h-1zM26 10h1v1h-1zM26 12h1v1h-1zM26 13h1v1h-1zM26 14h1v1h-1zM26 17h1v1h-1zM26 20h1v1h-1z'/%3E%3C/svg%3E");
  --control-height: 44px;
  --input-height: calc(2.8rem + 2px);
  --motion-fast: var(--control-time);
  --motion-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --focus-ring: 2px solid var(--focus);
  --focus-offset: 3px;
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15'/%3E%3Cpath d='M10 9v4.5'/%3E%3Cpath d='M10 6.4v.2'/%3E%3C/svg%3E");
  --icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15'/%3E%3Cpath d='m6.5 10 2.3 2.3 4.7-4.7'/%3E%3C/svg%3E");
  --icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.7 3.8 2.3 15a1.5 1.5 0 0 0 1.3 2.2h12.8a1.5 1.5 0 0 0 1.3-2.2L11.3 3.8a1.5 1.5 0 0 0-2.6 0'/%3E%3Cpath d='M10 8v3.6'/%3E%3Cpath d='M10 14.1v.2'/%3E%3C/svg%3E");
  --icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15'/%3E%3Cpath d='M10 6.2v4.6'/%3E%3Cpath d='M10 13.6v.2'/%3E%3C/svg%3E");
  --icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9h9a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1'/%3E%3Cpath d='M7 9V6.5a3 3 0 0 1 6 0V9'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E");
  --icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10a1 1 0 1 0 2 0 1 1 0 1 0-2 0'/%3E%3Cpath d='M9 10a1 1 0 1 0 2 0 1 1 0 1 0-2 0'/%3E%3Cpath d='M14 10a1 1 0 1 0 2 0 1 1 0 1 0-2 0'/%3E%3C/svg%3E");
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
  --icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.5 5-5 5 5 5'/%3E%3C/svg%3E");
  --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3.5h5.5V9'/%3E%3Cpath d='M16.5 3.5 9 11'/%3E%3Cpath d='M14 11.5v4a1 1 0 0 1-1 1H4.5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h4'/%3E%3C/svg%3E");
  --icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10a6 6 0 1 1-1.8-4.3'/%3E%3Cpath d='M16.2 3.5v3.3h-3.3'/%3E%3C/svg%3E");
  --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7.5h7.5a1 1 0 0 1 1 1V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8.5a1 1 0 0 1 1-1'/%3E%3Cpath d='M13 7.5V4.5a1 1 0 0 0-1-1H4.5a1 1 0 0 0-1 1V12a1 1 0 0 0 1 1H7'/%3E%3C/svg%3E");
  --icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.5h13'/%3E%3Cpath d='M8 5.5v-2h4v2'/%3E%3Cpath d='m5 5.5.8 11h8.4l.8-11'/%3E%3Cpath d='M8.5 8.5v5M11.5 8.5v5'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4v12M4 10h12'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 3a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11'/%3E%3Cpath d='m12.5 12.5 4 4'/%3E%3C/svg%3E");
  --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 5.5h9.5M7 10h9.5M7 14.5h9.5'/%3E%3Cpath d='M3.5 5.5h.01M3.5 10h.01M3.5 14.5h.01'/%3E%3C/svg%3E");
  --icon-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E");
  color-scheme: light;
  font-synthesis: none;
  font-family: "Be Vietnam Pro", sans-serif;
  color: var(--ink);
  background: var(--ground);
  font-size: 100%;
  line-height: 1.6;
}
@media (max-width: 1024px) {
  :root {
    --page-gutter: 24px;
  }
}
@media (max-width: 820px) {
  :root {
    --page-gutter: 20px;
  }
}
@media (max-width: 480px) {
  :root {
    --page-gutter: 16px;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea,
summary {
  touch-action: manipulation;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button,
.button,
.text-button,
.icon-button,
summary,
a {
  transition:
    background-color var(--control-time) ease-out,
    border-color var(--control-time) ease-out,
    color var(--control-time) ease-out,
    transform 80ms ease-out;
}
button:not(:disabled):active,
.button:not(:disabled):active,
.icon-button:not(:disabled):active {
  transform: translateY(1px);
  filter: brightness(0.95);
}
.text-link:active,
.text-button:not(:disabled):active {
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  button,
  .button,
  .text-button,
  .icon-button,
  summary,
  a {
    transition: none;
  }
  button:not(:disabled):active,
  .button:not(:disabled):active,
  .icon-button:not(:disabled):active {
    transform: none;
  }
}
button,
select:not(:disabled),
summary {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}
a {
  color: var(--action);
  text-underline-offset: 4px;
}
a:hover {
  text-decoration-thickness: 2px;
}
button,
select,
summary {
  user-select: none;
}
::selection {
  background: var(--selection);
  color: var(--brand);
}
input,
textarea {
  caret-color: var(--action);
}
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}
.main-content:focus {
  outline: none;
}
:is(h1, h2, h3, h4, p, div, section, article, aside, ul, ol, dl, figure, form, fieldset)[tabindex="-1"]:not([role=tab], [role=option], [role=menuitem], [role=radio], [role=button], [role=link], [role=checkbox], [role=switch], [role=gridcell], [role=treeitem]):focus {
  outline: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
}
h1 {
  font-size: var(--text-h1);
}
h2 {
  font-size: var(--text-xl);
}
h3 {
  font-size: var(--text-lg);
}
p {
  overflow-wrap: anywhere;
}
svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
fieldset {
  padding: 0;
  border: 0;
  margin: 0;
  min-width: 0;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* src/styles/page-frame.css */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--white);
  padding: 12px;
  z-index: var(--z-overlay);
}
.skip-link:focus {
  top: 12px;
}
.site-header :focus-visible {
  outline-color: var(--focus-on-brand);
}
.site-header {
  background: var(--brand);
  color: var(--white);
}
.header-inner {
  max-width: var(--container);
  min-height: 84px;
  margin-inline: auto;
  padding: 0 var(--page-gutter);
  display: flex;
  align-items: center;
  gap: 54px;
}
.brand {
  color: var(--white);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.666667rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.brand svg {
  width: 32px;
  height: 32px;
}
.main-content {
  max-width: var(--container);
  margin-inline: auto;
  padding: 40px var(--page-gutter) var(--space-16);
  min-height: 65vh;
}
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin: 0 0 var(--space-8);
}
.page-heading > div {
  min-width: 0;
}
.page-heading > :is(a, button) {
  flex: none;
}
.page-heading h1 {
  font-size: var(--text-h1);
}
.page-heading p {
  color: var(--muted);
  font-size: var(--text-md);
  margin-top: var(--space-2);
  max-width: 68ch;
}
@media (max-width: 820px) {
  .page-heading {
    display: block;
    margin-bottom: var(--space-6);
  }
  .page-heading > :is(a, button, .button) {
    margin-top: var(--space-3);
  }
}
.has-chevron::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icon-chevron-down) center / 18px no-repeat;
  mask: var(--icon-chevron-down) center / 18px no-repeat;
  transition: transform var(--motion-base) var(--ease-out);
  forced-color-adjust: none;
}
.has-chevron[aria-expanded=true]::after {
  transform: rotate(180deg);
}
@media (forced-colors: active) {
  .has-chevron::after {
    background-color: ButtonText;
  }
}
.text-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: var(--control-height);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}
:is(p, dd, dt, label, small, .field-help, .notice, .toast, .form-intro) > a.text-link:not(.button),
:is(p, dd, .field-help, .notice) > span > a.text-link:not(.button) {
  display: inline;
  min-height: 0;
  font-size: inherit;
  white-space: normal;
}
:is(p, dd, li).link-line > a.text-link:not(.button) {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  white-space: normal;
}
.below-workbench > div > a,
.qr-kind-links a,
.guide-actions a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
}
.payload-summary dd > a:only-child {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}
button.text-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-align: start;
  cursor: pointer;
  white-space: normal;
}
button.text-link:hover {
  color: var(--action-hover);
  text-decoration-thickness: 2px;
}
button.text-link:disabled {
  color: var(--disabled-ink);
  text-decoration: none;
  cursor: not-allowed;
}
:is(button, a).text-link.owned-title {
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 600;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
}
:is(button, a).text-link.owned-title:is(:hover, :focus-visible) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* src/styles/forms.css */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(350px, 0.87fr);
  gap: 40px;
  align-items: start;
  padding: 28px;
  background: var(--white);
  border-radius: var(--radius);
}
.editor-pane {
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.form-intro {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 8px 0 24px;
  max-width: 60ch;
}
.field {
  margin-bottom: var(--space-4);
  min-width: 0;
}
.field label,
.field-label,
form > label:not(.check) {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 8px;
}
.field label > span[aria-hidden],
:is(.field label, .field-label, form > label:not(.check), legend, .check, .check > span) > span[aria-hidden=true] {
  color: var(--action);
}
.field-help,
.field-hint {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.65;
  margin-top: 6px;
}
:is(.field-help, .field-hint, .field-error):empty {
  margin-top: 0;
}
:is(.field-help, .field-hint, .field-error):empty:not([role=status], [role=alert], [aria-live]) {
  display: none;
}
.field-help.error {
  color: var(--error);
}
.field-help.success {
  color: var(--success);
}
.field-help.success::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-inline-end: 6px;
  vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask: var(--icon-check) center / 16px no-repeat;
  mask: var(--icon-check) center / 16px no-repeat;
  forced-color-adjust: none;
}
.field-error {
  color: var(--error);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-body);
  margin-top: 6px;
}
.field-error:not(:empty) {
  position: relative;
  padding-inline-start: 22px;
}
.field-error:not(:empty)::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: calc((var(--leading-body) * 1em - 16px) / 2);
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--icon-error) center / 16px no-repeat;
  mask: var(--icon-error) center / 16px no-repeat;
  forced-color-adjust: none;
}
.field-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: 6px;
}
.field-meta > .field-help {
  margin-top: 0;
}
.field-meta > .field-count {
  flex: none;
  margin-inline-start: auto;
  color: var(--muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.field-meta > .field-count.is-over {
  color: var(--error);
  font-weight: 600;
}
.form-errors ul {
  margin: 4px 0 0;
  padding-inline-start: 1.25em;
}
.form-errors li + li {
  margin-top: 2px;
}
.form-errors a {
  color: inherit;
  font-weight: 600;
  text-underline-offset: 3px;
}
:where(input, select, textarea, .check, .bank-picker-trigger, fieldset) {
  scroll-margin-block: calc(max(var(--header-height), var(--preview-lens-h, 0px)) + var(--space-4)) calc(var(--sticky-bar-h, 0px) + var(--space-6));
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),
textarea,
select {
  width: 100%;
  min-height: var(--input-height);
  border: 1px solid var(--input-line);
  border-radius: var(--control-radius);
  background: var(--white);
  color: var(--ink);
  padding: 10px 12px;
  font-size: var(--text-md);
  line-height: 1.55;
  transition: border-color var(--motion-fast) ease-out;
}
textarea {
  display: block;
}
select {
  padding-right: 30px;
  text-overflow: ellipsis;
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
input:not(:disabled):hover,
textarea:not(:disabled):hover,
select:not(:disabled):hover {
  border-color: var(--muted);
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):disabled,
textarea:disabled,
select:disabled {
  background: var(--disabled-ground);
  color: var(--disabled-ink);
  border-color: var(--line);
  cursor: not-allowed;
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color])[readonly],
textarea[readonly] {
  background: var(--ground);
  color: var(--ink);
  user-select: text;
}
:is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), textarea, select, .bank-picker-trigger)[aria-invalid=true],
:is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), textarea, select)[aria-invalid=true]:hover {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}
input:is([type=checkbox], [type=radio])[aria-invalid=true] {
  outline: 2px solid var(--error);
  outline-offset: 1px;
}
input:is([type=checkbox], [type=radio])[aria-invalid=true]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--error);
}
fieldset[aria-invalid=true] {
  border-radius: var(--control-radius);
  box-shadow: inset 3px 0 0 var(--error);
  padding-inline-start: 12px;
}
textarea {
  resize: vertical;
  min-height: 100px;
}
.input-suffix,
.input-action {
  display: flex;
  align-items: stretch;
  position: relative;
}
:is(.input-affix, .input-suffix) {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--input-height);
  border: 1px solid var(--input-line);
  border-radius: var(--control-radius);
  background: var(--white);
  transition: border-color var(--motion-fast) ease-out;
}
:is(.input-affix, .input-suffix):hover {
  border-color: var(--muted);
}
:is(.input-affix, .input-suffix) > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]) {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
:is(.input-affix, .input-suffix) > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):is(:hover, :disabled, [aria-invalid=true]) {
  border: 0;
  box-shadow: none;
  background: transparent;
}
.input-suffix > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]) {
  padding-right: 8px;
}
.input-affix > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]):not([type=image]) {
  min-block-size: 0;
  padding-inline: 12px;
}
.input-suffix > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]):not([type=image]) {
  min-block-size: 0;
}
.input-affix > .affix + input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]):not([type=image]) {
  padding-inline-start: 2px;
}
.input-affix > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]):not([type=image]):not(:last-child) {
  padding-inline-end: 8px;
}
:is(.input-affix, .input-suffix) > input:focus-visible {
  outline: none;
}
:is(.input-affix, .input-suffix):has(> :is(input, select):focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
:is(.input-affix, .input-suffix):has(> [aria-invalid=true]) {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}
:is(.input-affix, .input-suffix):has(> :disabled),
.input-affix.is-locked,
.is-locked .input-affix {
  background: var(--disabled-ground);
  border-color: var(--line);
}
.input-affix > .affix {
  flex: none;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  user-select: none;
}
.input-affix > .affix:first-child {
  padding-inline: 12px 0;
}
.input-affix > .affix:last-child {
  padding-inline: 4px 14px;
}
.is-locked :is(.field label, .field-label, legend) > span[aria-hidden=true] {
  display: none;
}
:is(fieldset.is-locked:not(:has(.locked-note)) > legend, .field.is-locked:not(:has(.locked-note)) > :is(label, .field-label))::after,
.locked-note::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-inline: 6px 0;
  vertical-align: -3px;
  background-color: var(--muted);
  -webkit-mask: var(--icon-lock) center / 16px no-repeat;
  mask: var(--icon-lock) center / 16px no-repeat;
  forced-color-adjust: none;
}
.locked-note::before {
  margin-inline: 0 6px;
  background-color: currentColor;
}
.locked-note {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-top: 6px;
}
.input-suffix > span {
  flex: none;
  padding: 0 14px 0 4px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  user-select: none;
}
.input-action input {
  border-radius: var(--control-radius) 0 0 var(--control-radius) !important;
  min-width: 0;
}
.input-action button {
  border: 1px solid var(--input-line);
  border-left: 0;
  border-radius: 0 var(--control-radius) var(--control-radius) 0;
  background: var(--ground);
  font-size: var(--text-sm);
  min-width: 55px;
  color: var(--ink);
}
.check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 14px 0;
}
.check input {
  accent-color: var(--action);
  width: 17px;
  height: 17px;
  margin-top: 3px;
  flex: none;
}
.advanced {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}
.advanced summary,
.payload-detail summary {
  font-size: var(--text-sm);
  cursor: pointer;
  color: var(--muted);
  padding: 3px 0;
}
.advanced[open] summary {
  margin-bottom: 16px;
}
.form-bottom {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-top: 10px;
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: var(--control-height);
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.45;
}
.button[aria-busy=true] {
  cursor: progress;
}
.button[aria-busy=true]::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: busy-turn 0.8s linear infinite;
}
@keyframes busy-turn {
  to {
    transform: rotate(360deg);
  }
}
.primary {
  background: var(--action);
  color: var(--white);
}
.primary:hover:not(:disabled) {
  background: var(--action-hover);
}
.secondary {
  border-color: var(--input-line);
  color: var(--ink);
  background: var(--white);
}
.secondary:hover:not(:disabled) {
  background: var(--ground);
}
.danger {
  background: var(--error);
  color: var(--white);
}
.danger:hover:not(:disabled) {
  background: var(--error-hover);
}
.button.danger-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--error);
  text-decoration: none;
}
.button.danger-quiet:hover:not(:disabled) {
  background: var(--error-ground);
  color: var(--error-hover);
}
.quiet {
  background: transparent;
  color: var(--muted);
  font-weight: 400;
}
.quiet:hover:not(:disabled) {
  background: var(--ground);
  color: var(--ink);
}
.button:disabled:not([aria-busy=true]) {
  background: var(--disabled-ground);
  color: var(--disabled-ink);
  border-color: transparent;
}
.button:disabled[aria-busy=true] {
  cursor: progress;
}
:where(.text-button) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: start;
}
.text-button {
  min-height: var(--control-height);
  background: none;
  border: 0;
  padding: 8px 0;
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.text-button:disabled {
  color: var(--disabled-ink);
  text-decoration: none;
  cursor: not-allowed;
}
:where(.actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.actions.stack-narrow {
  container: actions / inline-size;
}
@container actions (max-width: 22rem) {
  .actions.stack-narrow > :is(.button, a.button, button) {
    flex: 1 1 100%;
  }
}
@media (max-width: 400px) {
  .actions.stack-narrow > :is(.button, a.button, button) {
    flex: 1 1 100%;
  }
}
.action-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.action-hint::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background-color: currentColor;
  -webkit-mask: var(--icon-info) center / 18px no-repeat;
  mask: var(--icon-info) center / 18px no-repeat;
  forced-color-adjust: none;
}
@media (forced-colors: active) {
  .field-help.success::before,
  .field-error:not(:empty)::before,
  .action-hint::before,
  .locked-note::before,
  :is(fieldset.is-locked:not(:has(.locked-note)) > legend, .field.is-locked:not(:has(.locked-note)) > :is(label, .field-label))::after {
    background-color: CanvasText;
  }
}

/* src/styles/output-feedback.css */
.output-pane {
  position: sticky;
  top: 22px;
  background: var(--surface-output);
  border-radius: var(--radius);
  padding: 24px 26px 22px;
}
.output-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.output-top h2 {
  font-size: var(--text-lg);
}
.draft-label {
  font-size: var(--text-sm);
  color: var(--muted);
}
.qr-preview {
  aspect-ratio: 1;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 16px;
  max-width: 342px;
  margin: auto;
}
.qr-preview > svg {
  width: 100%;
  height: 100%;
  stroke: none;
  max-width: 310px;
  max-height: 310px;
}
.qr-empty {
  text-align: center;
  color: var(--muted);
  padding: 10px;
}
.qr-empty > svg {
  height: 86px;
  width: 86px;
  stroke: var(--input-line);
  stroke-width: 1.5;
  margin-bottom: 16px;
}
.qr-empty p {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
.qr-empty span {
  display: block;
  font-size: var(--text-sm);
  margin-top: 6px;
  max-width: 26ch;
}
.validation-status {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 16px 0;
  min-height: 18px;
}
.validation-status[data-status=ready] {
  color: var(--success);
}
.validation-status[data-status=error] {
  color: var(--error);
}
.payload-summary {
  margin: 16px 0 20px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.payload-summary > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  padding-top: 8px;
  font-size: var(--text-sm);
}
.payload-summary dt {
  color: var(--muted);
}
.payload-summary dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.output-options {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  margin: 16px 0;
}
.output-options label {
  align-self: center;
  font-size: var(--text-sm);
  color: var(--muted);
}
.output-options select {
  padding: 4px 30px 4px 8px;
  font-size: var(--text-sm);
}
.export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.export-actions .button {
  flex: 1;
  white-space: nowrap;
  font-size: var(--text-sm);
  padding: 10px 12px;
  min-height: var(--control-height);
}
.export-actions .primary {
  flex: 1.3;
}
.payload-detail {
  margin-top: var(--section-gap);
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.payload-detail p {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
  margin-top: 8px;
}
.payload-detail pre {
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 140px;
  overflow: auto;
  font: 0.733333rem/1.6 ui-monospace, monospace;
  background: var(--white);
  padding: 10px;
  border-radius: var(--radius-sm);
  margin: 10px 0;
}
.notice {
  position: relative;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--control-radius);
  background: var(--surface-muted);
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  text-align: start;
  margin: var(--space-3) 0;
}
.notice:is(.info, .success, .warning, .error) {
  padding-inline-start: calc(var(--space-4) + 20px + var(--space-3));
}
.notice:is(.info, .success, .warning, .error)::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--space-4);
  top: calc(var(--space-3) + (1.6em - 20px) / 2);
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--notice-icon) center / 20px no-repeat;
  mask: var(--notice-icon) center / 20px no-repeat;
  forced-color-adjust: none;
}
.notice.info {
  --notice-icon: var(--icon-info);
  background: var(--selection);
  color: var(--brand);
}
.notice.success {
  --notice-icon: var(--icon-success);
  background: var(--success-ground);
  color: var(--success);
}
.notice.warning {
  --notice-icon: var(--icon-warning);
  background: var(--warning);
  border-color: var(--warning-line);
  color: var(--warning-ink);
}
.notice.error {
  --notice-icon: var(--icon-error);
  background: var(--error-ground);
  border-color: var(--error-line);
  color: var(--error);
}
.notice p + p {
  margin-top: 6px;
}
.notice.has-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2) var(--space-4);
}
.notice.has-actions > :not(.notice-actions) {
  flex: 1 1 20rem;
  min-width: 0;
  padding-block: calc((var(--control-height) - 1.6em) / 2);
}
.notice.has-actions:is(.info, .success, .warning, .error)::before {
  top: calc(var(--space-3) + (var(--control-height) - 20px) / 2);
}
.notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.toast {
  pointer-events: none;
  position: fixed;
  left: var(--page-gutter);
  right: var(--page-gutter);
  bottom: calc(var(--space-4) + var(--toast-lift, 0px) + env(safe-area-inset-bottom, 0px));
  width: fit-content;
  max-width: calc(100vw - 2 * var(--page-gutter));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  color: var(--white);
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
  z-index: var(--z-overlay);
  box-shadow: var(--shadow-2);
}
@media (min-width: 821px) {
  .toast {
    left: max(var(--page-gutter), calc((100% - var(--container)) / 2 + var(--page-gutter)));
    right: auto;
    margin-inline: 0;
    max-width: 26rem;
  }
}
dialog > .toast {
  left: var(--page-gutter);
  right: var(--page-gutter);
  margin-inline: auto;
  max-width: min(26rem, calc(100vw - 2 * var(--page-gutter)));
}
.toast-message {
  min-width: 0;
}
.toast.success::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--icon-check) center / 20px no-repeat;
  mask: var(--icon-check) center / 20px no-repeat;
  forced-color-adjust: none;
}
.toast.error {
  background: var(--error-ground);
  color: var(--error);
  border-color: var(--error-line);
  padding-block: 2px;
  padding-inline-end: 2px;
}
.toast-close {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: inherit;
}
.toast-close:hover {
  background: #b4231814;
}
dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  max-width: 460px;
  width: calc(100% - 32px);
  padding: var(--space-6);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  margin-block: max(16px, 8vh) auto;
  max-height: calc(100dvh - 2 * max(16px, 8vh));
  overflow: auto;
}
dialog.dialog-wide {
  max-width: 720px;
}
dialog::backdrop {
  background: var(--backdrop);
}
dialog h2:where(:not(.preview-sheet *)) {
  font-size: var(--text-xl);
  margin-bottom: 12px;
}
dialog p:not(.field-error, .notice, .dialog-subject, .dialog-subject-url, .dialog-text, .preview-sheet *) {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: 20px;
}
dialog .field p {
  margin-bottom: 0;
}
.dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
dialog > .dialog-heading {
  position: sticky;
  top: calc(-1 * var(--space-6));
  z-index: var(--z-raised);
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-3);
  padding: var(--space-6) var(--space-6) 0;
  background: var(--surface);
}
dialog:has(> .dialog-heading) {
  scroll-padding-block-start: var(--dialog-heading-h, 4rem);
}
@supports (animation-timeline: scroll()) {
  dialog > .dialog-heading {
    animation: dialog-heading-edge linear both;
    animation-timeline: scroll(nearest block);
    animation-range: 0 var(--space-4);
  }
  @media (prefers-reduced-motion: reduce) {
    dialog > .dialog-heading {
      animation-name: dialog-heading-edge !important;
      animation-timing-function: linear !important;
      animation-fill-mode: both !important;
      animation-timeline: scroll(nearest block) !important;
      animation-range: 0 var(--space-4) !important;
    }
  }
}
@keyframes dialog-heading-edge {
  from {
    box-shadow: 0 1px 0 transparent;
  }
  to {
    box-shadow: 0 1px 0 var(--line);
  }
}
.dialog-heading h2 {
  margin: 6px 0 0;
  font-size: var(--text-xl);
  overflow-wrap: anywhere;
}
.dialog-heading .dialog-close {
  margin: -6px -10px 0 0;
}
dialog .dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
dialog .dialog-actions > .button {
  white-space: nowrap;
}
dialog .dialog-error {
  margin-top: var(--space-4);
}
dialog .dialog-error + .dialog-actions {
  margin-top: var(--space-4);
}
dialog .text-button:where(:not(.preview-sheet *)) {
  margin-top: 0;
}
@media (max-width: 400px) {
  dialog .dialog-actions {
    flex-direction: column;
    align-items: stretch;
  }
  dialog .dialog-actions > .button {
    width: 100%;
  }
}
.confirm-dialog h2 {
  margin-bottom: var(--space-3);
}
.dialog-subject {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.confirm-dialog p.dialog-subject:not(.field-error) {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}
dialog p.dialog-subject-url:not(.field-error) {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.confirm-dialog .dialog-subject + .dialog-text,
.confirm-dialog .dialog-subject-url + .dialog-text {
  margin-top: var(--space-3);
}
dialog p.dialog-text {
  margin-bottom: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.summary-list {
  margin: 0;
  border-top: 1px solid var(--line);
  container: summary / inline-size;
}
.summary-list > div {
  display: grid;
  grid-template-columns: minmax(9rem, 38%) minmax(0, 1fr);
  gap: 4px var(--space-4);
  align-items: baseline;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
}
.summary-list dt {
  color: var(--muted);
  font-size: var(--text-sm);
}
.summary-list dd {
  margin: 0;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.summary-list :is([data-kind=number], .num) {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.summary-list .summary-copy {
  margin-block: -12px;
  margin-inline-start: var(--space-1);
  vertical-align: middle;
}
@container summary (max-width: 30rem) {
  .summary-list > div {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container summary (max-width: 18rem) {
  .summary-list :is([data-kind=number], .num) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
@media (forced-colors: active) {
  .notice {
    border: 1px solid CanvasText;
  }
  .notice:is(.info, .success, .warning, .error)::before,
  .toast.success::before {
    background-color: CanvasText;
  }
}

/* src/styles/tool-pages.css */
.wide-content {
  max-width: var(--container-tool);
  margin-inline: 0;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: center;
  margin: var(--space-8) 0 var(--space-5);
}
.plain-panel > .section-heading:first-child {
  margin-top: 0;
}
.section-heading p {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-top: 8px;
}
.plain-panel {
  padding: 28px;
  background: var(--white);
  border: 0;
  border-radius: var(--radius);
}
.drop-zone {
  padding: 46px 24px;
  border: 1px dashed var(--input-line);
  background: var(--white);
  text-align: center;
  border-radius: var(--radius-lg);
}
.drop-zone > svg {
  width: 36px;
  height: 36px;
  color: var(--action);
  margin-bottom: 14px;
}
.drop-zone h2 {
  font-size: var(--text-xl);
}
.drop-zone p {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 8px auto 20px;
  max-width: 55ch;
}
.drop-zone input[type=file] {
  max-width: 100%;
  font-size: var(--text-sm);
}
.scan-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.video-stage {
  max-width: 640px;
  margin: 22px auto;
  position: relative;
  background: var(--brand);
  border-radius: var(--radius);
  overflow: hidden;
}
.video-stage video {
  display: block;
  width: 100%;
  max-height: 440px;
}
.scan-results {
  margin-top: 26px;
}
.scan-result {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-top: 16px;
}
.scan-result pre {
  font: 0.8rem/1.75 ui-monospace, monospace;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 260px;
  overflow: auto;
  background: var(--ground);
  padding: 14px;
  border-radius: var(--radius-sm);
}
.drop-zone.is-dragover {
  border: 2px solid var(--action);
  background: var(--surface-muted);
}
.drop-zone.camera-mode {
  padding: 16px;
}
.drop-zone.camera-mode svg,
.drop-zone.camera-mode #reader-input-heading,
.drop-zone.camera-mode #scan-file-hint {
  display: none;
}
.camera-hint {
  margin: 0 auto 12px;
  max-width: 46ch;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
}
.drop-zone .video-stage {
  margin: 0 auto 16px;
}
.drop-zone .video-stage video {
  max-height: 60vh;
  max-height: min(60svh, 440px);
}
.drop-zone .file-choice {
  display: flex;
  max-width: 320px;
  margin-inline: auto;
}
@media (hover: none) and (pointer: coarse) {
  .keyboard-hint {
    display: none;
  }
}
.scan-source {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.scan-source img {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
}
#scan-status,
.scan-result {
  scroll-margin-top: 16px;
}
.reader-value {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.reader-raw {
  margin-top: 4px;
}
@media (max-width: 820px) {
  .reader-output > .section-heading {
    margin-top: 4px;
  }
}
@media (max-width: 480px) {
  .scan-result {
    padding: 18px 16px;
  }
}
.toolbar {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin: 22px 0;
}
.toolbar input {
  flex: 2;
  min-width: 180px;
}
.toolbar select {
  flex: 1;
  min-width: 130px;
}
.library-list {
  display: grid;
  gap: 12px;
}
.item-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.table-wrap {
  overflow: auto;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
  background: var(--white);
  font-size: var(--text-sm);
}
th,
td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  background: var(--surface-output);
  font-weight: 600;
  color: var(--brand);
  white-space: nowrap;
}
td {
  max-width: 350px;
  overflow-wrap: anywhere;
}
tr:last-child td {
  border-bottom: 0;
}
.mapping-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin: 22px 0;
}
.bulk-steps {
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 24px 0 30px;
  font-size: var(--text-sm);
  color: var(--muted);
  flex-wrap: wrap;
}
.bulk-steps li {
  display: flex;
  gap: 8px;
  align-items: center;
}
.bulk-steps li > span:first-child {
  background: var(--selection);
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brand);
}
.progress-wrap {
  margin: 24px 0;
}
.progress-wrap progress {
  display: block;
  width: 100%;
  height: 14px;
  accent-color: var(--action);
  margin: 12px 0;
}
.template-examples {
  margin-bottom: 40px;
}
.guide-link {
  position: relative;
}
.guide-link :is(h2, h3) > a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.guide-link p {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 8px;
}
.guide-article {
  max-width: var(--container-reading);
  margin-inline: 0;
}
.guide-article .lead {
  font-size: var(--text-lg);
  color: var(--muted);
  margin: 20px 0 30px;
}
.guide-article h2 {
  font-size: var(--text-2xl);
  margin: 36px 0 14px;
}
.guide-article h3 {
  margin: 24px 0 10px;
}
.guide-article p,
.guide-article li {
  font-size: var(--text-md);
  line-height: 1.95;
  color: var(--muted);
}
.guide-article p + p {
  margin-top: 16px;
}
.guide-article ol,
.guide-article ul {
  padding-left: 22px;
}
.guide-article li + li {
  margin-top: 8px;
}
.guide-article details {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}
.guide-article details summary {
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
}
.guide-article details p {
  margin-top: 12px;
}
.guide-actions {
  margin: 30px 0;
  display: flex;
  gap: 16px;
}
.admin-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 22px 0;
}
.admin-nav button {
  font-size: var(--text-sm);
}
.admin-nav .button {
  border: 0;
  background: transparent;
  color: var(--muted);
}
.admin-nav .button:hover {
  background: var(--surface-muted);
  color: var(--ink);
}
.admin-nav .button[aria-current=page] {
  background: var(--selection);
  color: var(--brand);
  font-weight: 600;
}
.admin-section-picker {
  display: none;
}
@media (max-width: 640px) {
  .admin-section-picker {
    display: block;
    margin: var(--space-5) 0 var(--space-6);
  }
  .admin-nav {
    display: none;
  }
}
.admin-panel h2 {
  margin-bottom: 20px;
}
.version-list {
  padding-left: 20px;
  font-size: var(--text-sm);
}
.version-list li {
  margin: 12px 0;
}
#print-root {
  display: none;
}
.print-sheet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14mm;
}
.print-card {
  break-inside: avoid;
  page-break-inside: avoid;
  background: #fff;
  padding: 12mm;
  text-align: center;
  border: 1px solid #ddd;
  color: #111;
}
.print-card svg {
  width: 65mm;
  height: 65mm;
  stroke: none;
  display: block;
  margin: 6mm auto;
}
.print-card h2 {
  font-size: 18pt;
  color: #111;
}
.print-card p {
  font-size: 10pt;
  margin: 3mm 0;
}
.print-card dl {
  font-size: 10pt;
  text-align: left;
}
.print-card dl > div {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3mm;
  margin: 2mm 0;
}
.print-card dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.print-card dt {
  color: #333;
}
.print-card .print-note {
  font-size: 8pt;
  color: #444;
}
.print-footer {
  font-size: 8pt;
  margin-top: 5mm;
  color: #444;
}

/* src/styles/responsive-print.css */
@media (max-width: 1024px) {
  .header-inner {
    gap: 26px;
  }
  .main-nav a {
    padding: 10px 12px;
  }
  .workspace {
    gap: 20px;
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.95fr);
  }
  .editor-pane {
    padding: 22px;
  }
  .output-pane {
    padding: 22px;
  }
  .main-content {
    padding-block: 30px 50px;
  }
}
@media (max-width: 820px) {
  .header-inner {
    flex-wrap: wrap;
    gap: 0 20px;
    min-height: 110px;
  }
  .brand {
    font-size: 1.533333rem;
  }
  .brand svg {
    width: 28px;
    height: 28px;
  }
  .header-help {
    font-size: var(--text-sm);
  }
  .main-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding: 14px 0 12px;
    gap: 8px;
  }
  .main-nav a {
    padding: 8px 12px;
    font-size: var(--text-sm);
    flex: 1;
    text-align: center;
  }
  .main-content {
    padding-block: 26px 44px;
  }
  .workspace {
    grid-template-columns: 1fr;
  }
  .output-pane {
    position: static;
  }
  .qr-preview {
    width: 300px;
    max-width: 100%;
    aspect-ratio: 1;
  }
  .output-options {
    grid-template-columns: auto 1fr auto 1fr;
  }
  .output-options select {
    min-width: 0;
  }
  .export-actions .button {
    font-size: var(--text-sm);
  }
  .mapping-grid {
    gap: 14px;
  }
  .item-actions {
    grid-column: 2;
  }
}
@media (max-width: 480px) {
  :root {
    font-size: var(--text-md);
  }
  .header-help svg {
    display: none;
  }
  .main-nav {
    gap: 2px;
  }
  .main-nav a {
    font-size: var(--text-sm);
    padding: 8px 8px;
  }
  .editor-pane {
    padding: 20px 16px;
  }
  .field label {
    font-size: var(--text-sm);
  }
  .field-help {
    font-size: var(--text-sm);
  }
  .form-bottom {
    gap: 8px;
    flex-wrap: wrap;
  }
  .form-bottom .primary {
    flex: 1;
    min-width: 175px;
  }
  .form-bottom .quiet {
    font-size: var(--text-sm);
    padding: 10px 8px;
  }
  .output-pane {
    padding: 22px 18px;
  }
  .output-options {
    grid-template-columns: auto 1fr;
  }
  .qr-preview {
    width: 280px;
  }
  .export-actions .button {
    font-size: var(--text-sm);
    min-height: 44px;
    padding: 8px;
  }
  .drop-zone {
    padding: 32px 18px;
  }
  .mapping-grid {
    grid-template-columns: 1fr;
  }
  .toolbar > * {
    flex: 1 !important;
  }
  .guide-article h1 {
    font-size: var(--text-h1);
  }
  .guide-article .lead {
    font-size: var(--text-md);
  }
  .guide-article h2 {
    font-size: var(--text-xl);
  }
  .guide-article p,
  .guide-article li {
    font-size: var(--text-sm);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
@media print {
  @page {
    size: A4;
    margin: 12mm;
  }
  body {
    background: #fff;
  }
  .site-header,
  .main-content,
  .site-footer,
  .toast,
  dialog {
    display: none !important;
  }
  #print-root {
    display: block !important;
  }
  body:is([data-page=guides], [data-page=article], [data-page=privacy], [data-page=terms], [data-page=about], [data-page=developers], [data-page=payment-landing], [data-page=coffee], [data-page=not-found]) .main-content {
    display: block !important;
  }
  .print-sheet.single {
    grid-template-columns: 1fr;
  }
  .print-card {
    border-color: #aaa;
    max-width: 180mm;
    margin: auto;
    width: 100%;
  }
  .print-card svg {
    width: 65mm !important;
    height: 65mm !important;
  }
  .print-card.large svg {
    width: 90mm !important;
    height: 90mm !important;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
}
.qr-preview {
  max-width: 280px;
}
.qr-preview > svg {
  max-width: 252px;
  max-height: 252px;
}
.payment-field-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 18px;
}
.payment-field-grid .field-help {
  font-size: var(--text-sm);
}
.form-intro {
  margin-bottom: 20px;
}
.advanced {
  padding: 12px 0;
}
.editor-pane {
  padding-top: 22px;
}
@media (max-width: 480px) {
  .payment-field-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .payment-field-grid .field-help {
    font-size: var(--text-sm);
  }
}
.editor-pane input,
.editor-pane textarea {
  scroll-margin-block: 20px;
}
#library-list ~ section {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
#library-list ~ section > h2 {
  margin-bottom: 12px;
}
#library-list ~ section .library-list {
  margin-top: 20px;
}
@media (min-width: 821px) {
  .workspace .qr-preview {
    max-width: 250px;
  }
  .workspace .qr-preview > svg {
    max-width: 224px;
    max-height: 224px;
  }
}
@media print {
  html,
  body {
    background: #fff !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  #print-root {
    background: #fff !important;
  }
}
.settings-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}
#admin-email-form {
  margin-bottom: 28px;
}
@media (max-width: 480px) {
  .settings-fields {
    grid-template-columns: 1fr;
  }
}

/* src/styles/task-controls.css */
.header-utilities {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-utilities .header-help {
  margin-left: 0;
}
.language-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--white);
  border: 1px solid var(--brand-line);
  border-radius: var(--control-radius);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
}
.language-switch:hover {
  background: var(--brand-hover);
}
a[data-language][aria-busy=true] {
  cursor: progress;
}
.language-switch[aria-busy=true] {
  gap: 4px;
}
.language-switch[aria-busy=true]::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: busy-turn 0.8s linear infinite;
}
.field input,
.field select,
.field textarea,
.output-options select {
  font-size: var(--text-md);
  min-height: 46px;
}
.field label,
.output-options label {
  font-size: var(--text-sm);
}
.field-help,
.field-error,
.payment-field-grid .field-help {
  font-size: var(--text-sm);
  line-height: 1.6;
}
.button,
.text-button {
  min-height: 44px;
  font-size: var(--text-sm);
}
button,
select,
input {
  font-variant-numeric: tabular-nums;
}
.check {
  align-items: flex-start;
  line-height: 1.6;
}
.check input {
  flex-shrink: 0;
}
.payment-request-options {
  margin-bottom: 8px;
}
.advanced > summary {
  min-height: 44px;
  padding-block: 8px;
  font-size: var(--text-sm);
}
.advanced[open] > summary {
  margin-bottom: 14px;
}
.editor-pane .form-bottom {
  padding-top: 12px;
}
#output-title {
  scroll-margin-top: 24px;
}
.validation-status {
  font-size: var(--text-sm);
  line-height: 1.6;
}
.qr-empty {
  min-height: 180px;
  display: grid;
  align-content: center;
  justify-items: center;
}
.qr-preview .qr-empty {
  width: 100%;
}
.qr-preview:has(.qr-empty) {
  aspect-ratio: auto;
}
.payload-summary > div {
  font-size: var(--text-sm);
  grid-template-columns: minmax(95px, 0.7fr) minmax(0, 1.3fr);
}
.export-actions .button {
  font-size: var(--text-sm);
  min-height: 46px;
  white-space: normal;
}
.output-settings {
  margin-top: var(--section-gap);
}
.output-settings .output-options {
  margin-bottom: 0;
}
#card-settings {
  margin-top: 24px;
  border-top: 1px solid var(--line);
}
#card-preview {
  margin: 20px auto;
  max-width: 380px;
}
#card-preview img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
#card-status {
  margin-block: 16px;
}
.file-choice,
.field > label.file-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 10px 16px;
  background: var(--white);
  border: 1px solid var(--input-line);
  border-radius: var(--control-radius);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.file-choice:not(.primary):hover {
  background: var(--ground);
}
.file-choice.primary {
  background: var(--action);
  border-color: var(--action);
  color: var(--white);
}
.file-choice.primary:hover {
  background: var(--action-hover);
}
.file-choice:focus-within {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.file-choice:has(input:disabled) {
  cursor: not-allowed;
  background: var(--disabled-ground);
  border-color: transparent;
  color: var(--disabled-ink);
}
#bulk-file-name {
  overflow-wrap: anywhere;
}
input[type=file]:not(.sr-only) {
  width: 100%;
  min-height: 48px;
  padding: 8px;
  font-size: var(--text-sm);
}
input[type=file]::file-selector-button {
  font: inherit;
  color: var(--brand);
  background: var(--selection);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-right: 12px;
}
.reader-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.reader-output {
  min-width: 0;
}
.reader-comparison {
  margin-top: 28px;
}
.comparison-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.comparison-panel {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.comparison-fingerprints {
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
}
.comparison-choice {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.comparison-fingerprints code {
  white-space: normal;
  word-break: break-all;
}
.template-examples {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.template-examples > h2 {
  margin-bottom: 20px;
}
.version-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.version-picker [aria-pressed=true] {
  background: var(--selection);
  color: var(--brand);
}
.version-picker + section h3 {
  margin-block: 12px 18px;
}
#print-preview {
  max-width: 920px;
  width: calc(100vw - 32px);
}
#print-preview.print-preview-single {
  max-width: 620px;
}
#print-preview .print-sheet {
  background: var(--ground);
  padding: clamp(8px, 3vw, 20px);
  margin-top: 20px;
}
#print-preview .print-sheet.single {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
#print-preview .print-card {
  background: #fff;
  max-width: 100%;
  min-width: 0;
  padding: clamp(12px, 3vw, 24px);
}
#print-preview .print-card svg {
  max-width: 100%;
  height: auto;
}
#print-preview .identity-print {
  width: min(100%, 380px);
  padding: 0;
  border: 0;
}
#print-preview .identity-print img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
}
#print-preview .dialog-actions {
  position: sticky;
  bottom: -28px;
  z-index: 1;
  flex-wrap: wrap;
  margin: 20px -28px -28px;
  padding: 14px 28px 28px;
  background: var(--white);
  border-top: 1px solid var(--line);
}
@media (max-width: 640px) {
  #print-preview .print-sheet {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  #print-preview .print-card h2 {
    font-size: 1.25rem;
  }
  #print-preview .print-card dl > div {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}
@media (max-width: 1024px) {
  .header-inner {
    gap: 20px;
  }
  .header-utilities {
    gap: 10px;
  }
  .header-help {
    display: none;
  }
}
@media (max-width: 820px) {
  .header-inner {
    gap: 0 16px;
  }
  .main-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
  }
  .main-nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    font-size: var(--text-sm);
    padding: 8px 4px;
  }
  .reader-workspace {
    grid-template-columns: 1fr;
  }
  .workspace {
    gap: 22px;
  }
}
@media (max-width: 480px) {
  .main-content {
    padding-block: 24px 40px;
  }
  .editor-pane,
  .output-pane,
  .plain-panel {
    padding: 20px 16px;
  }
  .payment-field-grid,
  .comparison-inputs {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .export-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .export-actions .primary {
    grid-column: 1 / -1;
  }
  .guide-article p,
  .guide-article li {
    font-size: var(--text-md);
  }
  .toolbar {
    gap: 10px;
  }
  #print-preview .print-sheet {
    padding: 8px;
  }
}
@media print {
  .print-card.identity-print {
    border: 0;
    padding: 0;
  }
  .print-card.identity-print img {
    display: block;
    width: 95mm !important;
    max-width: 100%;
    height: auto !important;
    margin: auto;
  }
}

/* src/styles/bulk-comparison.css */
.comparison-table td,
.comparison-table th {
  overflow-wrap: anywhere;
}
.comparison-difference {
  background: var(--warning);
}
.comparison-difference.comparison-minor {
  background: color-mix(in srgb, var(--warning) 40%, transparent);
}
.comparison-fingerprints dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.comparison-table td.comparison-code {
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .comparison-table table,
  .comparison-table tbody,
  .comparison-table tr,
  .comparison-table th,
  .comparison-table td {
    display: block;
  }
  .comparison-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .comparison-table tr {
    padding: 10px 8px;
    border-bottom: 1px solid var(--line);
  }
  .comparison-table th[scope=row] {
    padding: 0 0 4px;
    font-weight: 600;
    border: 0;
    white-space: normal;
  }
  .comparison-table td {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 8px;
    padding: 2px 0;
    border: 0;
  }
  .comparison-table td::before {
    content: attr(data-column);
    color: var(--muted);
  }
}
.section-heading {
  flex-wrap: wrap;
}
.card-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (min-width: 821px) {
  .header-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 24px;
  }
  .main-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    min-width: 0;
  }
  .main-nav a {
    white-space: normal;
    text-align: center;
    padding: 12px 8px;
  }
  .header-utilities {
    margin-left: 0;
  }
}
.workspace > *,
.reader-workspace > *,
.comparison-grid > *,
.mapping-grid > *,
.settings-fields > * {
  min-width: 0;
}
.text-link {
  white-space: normal;
}
.text-link {
  overflow-wrap: anywhere;
}
.field input,
.field select,
.field textarea {
  min-width: 0;
  max-width: 100%;
}
.admin-record-table {
  min-width: 880px;
}
@media (max-width: 820px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}
.site-header {
  container-type: inline-size;
  container-name: site-header;
}
.editor-pane {
  container-type: inline-size;
  container-name: editor;
}
.main-nav a {
  overflow-wrap: anywhere;
}
@container site-header (max-width: 20rem) {
  .main-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container editor (max-width: 16rem) {
}

/* src/styles/bulk.css */
.bulk-steps {
  gap: var(--space-2) var(--space-6);
  margin: 0 0 var(--space-6);
}
.bulk-steps li {
  min-width: 0;
  max-width: 100%;
}
.bulk-steps li > .bulk-step-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: auto;
  min-width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  font-weight: 600;
  line-height: 1;
}
.bulk-steps li > span:not(.bulk-step-mark) {
  min-width: 0;
}
.bulk-steps li[aria-current=step] {
  color: var(--brand);
  font-weight: 600;
}
.bulk-steps li[aria-current=step] > .bulk-step-mark {
  background: var(--brand);
  color: var(--white);
}
.bulk-steps li.done > .bulk-step-mark {
  background: var(--action);
  color: var(--white);
}
@media (max-width: 640px) {
  .bulk-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .bulk-steps li {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    line-height: var(--leading-snug);
  }
  .bulk-steps li > span:not(.bulk-step-mark) {
    max-width: 100%;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}
.bulk-done {
  margin: 0 0 var(--space-6);
}
.bulk-done:focus {
  outline: none;
}
.bulk-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.bulk-layout > * {
  min-width: 0;
}
@media (min-width: 1025px) {
  .bulk-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    grid-template-areas: "input aside" "review aside";
  }
  .bulk-input {
    grid-area: input;
  }
  .bulk-layout > .client-readiness {
    grid-column: 1;
  }
  .bulk-review {
    grid-area: review;
  }
  .bulk-sample,
  .bulk-preview {
    grid-area: aside;
    position: sticky;
    top: var(--space-6);
  }
  :is(.bulk-sample, .bulk-preview)[data-tall] {
    position: static;
  }
}
.bulk-input {
  container: bulk-input / inline-size;
}
.bulk-input-grid {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--space-5) var(--space-6);
  align-items: start;
}
.bulk-input-grid > .field {
  margin: 0;
}
@container bulk-input (max-width: 34rem) {
  .bulk-input-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bulk-file-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.bulk-file-actions .text-button {
  min-height: var(--control-height);
}
.bulk-file-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--input-height);
  padding-inline-start: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--input-line);
  border-radius: var(--control-radius);
}
.bulk-file-chip > svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--action);
}
.bulk-file-chip-text {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}
.bulk-file-chip-name {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-file-chip-meta {
  flex: none;
  color: var(--muted);
  font-size: var(--text-sm);
}
.bulk-file-chip-meta:empty {
  display: none;
}
.bulk-file-chip .icon-button {
  flex: none;
}
.bulk-file-chip .icon-button svg {
  width: 18px;
  height: 18px;
}
.bulk-file-field:has(#bulk-file[aria-invalid=true]) .bulk-file-chip {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}
.bulk-file-field > .field-help {
  margin-top: var(--space-2);
}
.bulk-input-full > :is(.bulk-bank-codes, .bulk-format-help, .bulk-mapping-details) {
  margin: var(--space-5) 0 0;
}
.bulk-bank-codes > summary,
.bulk-mapping-details > summary {
  min-height: var(--control-height);
}
.bulk-mapping-details .mapping-grid {
  margin: var(--space-3) 0 0;
}
.bulk-bank-list {
  max-height: 320px;
  margin-top: 8px;
}
.bulk-input-status {
  margin: var(--space-4) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.bulk-input-status.error {
  color: var(--error);
}
#validate-csv {
  margin-top: var(--space-4);
}
#bulk-input-panel.dragging {
  outline: 2px dashed var(--action);
  outline-offset: 4px;
}
.bulk-input.is-collapsed {
  padding-block: var(--space-4);
}
.bulk-input-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}
.bulk-input-summary > svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--action);
}
.bulk-input-summary > p {
  flex: 1 1 8rem;
  min-width: 0;
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.bulk-input-summary > .button {
  flex: none;
}
.bulk-sample,
.bulk-preview {
  container: bulk-aside / inline-size;
  padding: var(--space-6);
  background: var(--surface-output);
  border-radius: var(--radius-lg);
}
:is(.bulk-sample, .bulk-preview) > h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
}
.bulk-sample > .bulk-sample-caption {
  display: block;
  overflow: visible;
  -webkit-line-clamp: none;
  block-size: auto;
  min-block-size: calc(var(--cap-lines) * var(--leading-snug) * var(--text-sm));
  margin-bottom: var(--space-4);
}
@container bulk-aside (max-width: 20rem) {
  .bulk-sample > .bulk-sample-caption {
    --cap-lines: 3;
  }
}
.bulk-sample-rows,
.bulk-preview-list {
  -webkit-touch-callout: none;
  user-select: none;
}
.bulk-sample-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.bulk-sample-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
}
.bulk-sample-row:first-child {
  border-top: 0;
}
.bulk-sample-qr {
  display: block;
  width: 64px;
  height: 64px;
  background: var(--white) center / 100% no-repeat;
}
:is(.bulk-sample-qr, .bulk-preview-qr) > svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: none;
  pointer-events: none;
}
.bulk-sample-words {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.bulk-sample-file,
.bulk-sample-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-sample-file {
  font-size: var(--text-sm);
  font-weight: 600;
}
.bulk-sample-meta {
  color: var(--muted);
  font-size: var(--text-xs);
}
.bulk-sample-bar {
  display: block;
  width: min(100%, 9.5em);
  height: 0.58em;
  margin-block: 0.36em 0.1em;
  border-radius: var(--radius-pill);
  background: rgb(21 47 63 / 15%);
  font-size: var(--text-xs);
}
@container bulk-aside (max-width: 20rem) {
  .bulk-sample-file,
  .bulk-sample-meta {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
.bulk-sample-zip {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.bulk-sample-zip > svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--muted);
}
.bulk-sample-zip p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.bulk-sample-zip strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}
.bulk-sample-check {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.bulk-preview-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.bulk-preview-list[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bulk-preview-list[data-count="1"] {
  grid-template-columns: minmax(0, 11rem);
  justify-content: center;
}
.bulk-preview-list > li {
  min-width: 0;
}
.bulk-preview-card {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 2px;
  height: 100%;
  min-width: 0;
  padding: var(--space-2);
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.bulk-preview-card:hover {
  border-color: var(--input-line);
  box-shadow: var(--shadow-1);
}
.bulk-preview-qr {
  display: block;
  width: 100%;
  max-width: 128px;
  aspect-ratio: 1;
  margin-bottom: var(--space-2);
}
.bulk-preview-sheet {
  display: block;
  width: 100%;
  max-width: 10rem;
  margin-bottom: var(--space-2);
}
@container bulk-aside (min-width: 36rem) {
  .bulk-preview-card {
    justify-items: center;
    text-align: center;
  }
}
.bulk-preview-sheet > img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-1);
}
.bulk-preview-name {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-preview-row {
  color: var(--action);
  font-size: var(--text-xs);
  font-weight: 600;
}
@container bulk-aside (max-width: 19rem) {
  .bulk-preview-list,
  .bulk-preview-list[data-count] {
    grid-template-columns: minmax(0, 1fr);
  }
  .bulk-preview-card {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3);
  }
  .bulk-preview-card > :is(.bulk-preview-qr, .bulk-preview-sheet) {
    grid-row: span 2;
    margin: 0;
  }
}
.bulk-preview > .bulk-preview-empty {
  margin-top: var(--space-4);
  padding: var(--space-8) var(--space-5);
}
.bulk-fix-rows {
  margin-top: var(--space-5);
}
.bulk-fix-rows > h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
}
.bulk-fix-rows ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bulk-fix-rows li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  min-width: 0;
}
.bulk-fix-rows li > a {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: var(--control-height);
  font-size: var(--text-sm);
  font-weight: 600;
}
.bulk-fix-name {
  flex: 1 1 6rem;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-fix-more {
  padding-block: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
}

/* src/styles/bulk-review.css */
.bulk-review > .section-heading {
  margin-top: 0;
}
.bulk-decision {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.bulk-decision > * {
  min-width: 0;
  margin: 0;
}
.bulk-counts {
  font-weight: 600;
  line-height: var(--leading-snug);
}
.bulk-print-choice {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.bulk-print-choice > legend {
  float: left;
  width: 100%;
  padding: 0;
  font-size: var(--text-md);
  font-weight: 600;
}
.bulk-print-choice > legend + * {
  clear: left;
}
.bulk-print-choice > .field-help {
  margin: var(--space-1) 0 0;
}
.bulk-print-choice > .field-error {
  margin: var(--space-2) 0 0;
}
.bulk-print-themes {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-3) -6px 0;
  padding: 6px 6px var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 6px;
  scrollbar-width: thin;
}
.bulk-print-option {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  flex: none;
  width: 92px;
  cursor: pointer;
  scroll-snap-align: start;
}
.bulk-print-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 118px;
  padding: 7px;
  background: var(--surface-output);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--motion-fast) ease-out, box-shadow var(--motion-fast) ease-out;
}
.bulk-print-art > img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  box-shadow: var(--shadow-1);
}
.bulk-print-none > svg {
  width: 30px;
  height: 30px;
  color: var(--muted);
}
.bulk-print-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.bulk-print-option:hover .bulk-print-art {
  border-color: var(--input-line);
}
.bulk-print-option:has(:checked) .bulk-print-art {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--action);
}
.bulk-print-option:has(:checked) .bulk-print-art::after {
  content: "";
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--action) var(--icon-check-white) center / 14px no-repeat;
  box-shadow: 0 0 0 2px var(--surface);
}
.bulk-print-option:has(:focus-visible) .bulk-print-art {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.bulk-print-option:has(:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}
.bulk-print-themes[data-more~=end] {
  mask-image:
    linear-gradient(
      to right,
      #000 calc(100% - 2.5rem),
      transparent);
}
.bulk-print-themes[data-more~=start] {
  mask-image:
    linear-gradient(
      to left,
      #000 calc(100% - 2.5rem),
      transparent);
}
.bulk-print-themes[data-more="start end"] {
  mask-image:
    linear-gradient(
      to right,
      transparent,
      #000 2.5rem,
      #000 calc(100% - 2.5rem),
      transparent);
}
@media (forced-colors: active) {
  .bulk-print-option:has(:checked) .bulk-print-art {
    outline: 2px solid Highlight;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bulk-print-art {
    transition: none;
  }
}
.bulk-print-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  align-items: start;
  margin-top: var(--space-3);
}
.bulk-print-settings[hidden] {
  display: none;
}
.bulk-print-settings > .field {
  margin: 0;
}
.bulk-print-settings > :is(.bulk-print-owner, .bulk-print-marks) {
  grid-column: 1 / -1;
}
.bulk-decision .bulk-confirm {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.bulk-decision.is-done > :is(.bulk-print-choice, .bulk-confirm, #bulk-confirm-error, .progress-wrap) {
  display: none;
}
.bulk-decision > .bulk-actions:not(:has(> .button:not([hidden]))) {
  display: none;
}
.bulk-print-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.bulk-print-summary[hidden] {
  display: none;
}
.bulk-print-summary > p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.bulk-decision #bulk-confirm-error {
  margin-top: calc(-1 * var(--space-2));
}
.bulk-status {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.bulk-status.error {
  color: var(--error);
}
.bulk-decision > .bulk-status:empty {
  margin-top: calc(-1 * var(--space-4));
}
.bulk-decision .progress-wrap progress {
  margin: var(--space-2) 0;
}
@container bulk-review (max-width: 30rem) {
  .bulk-print-settings {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .bulk-sample,
  .bulk-preview {
    padding: var(--space-5) var(--space-4);
  }
  .bulk-sample-row {
    gap: var(--space-3);
    padding-inline: var(--space-3);
  }
  .bulk-decision {
    padding: var(--space-4);
  }
  .bulk-print-settings {
    grid-template-columns: minmax(0, 1fr);
  }
  .bulk-actions > .button {
    flex: 1 1 100%;
  }
  .bulk-done .notice-actions,
  .bulk-done .notice-actions > .button {
    width: 100%;
  }
}
.bulk-review {
  container: bulk-review / inline-size;
}
.bulk-table {
  margin-top: 0;
}
.bulk-review-table {
  width: 100%;
  table-layout: fixed;
}
.bulk-col-row {
  width: 7rem;
}
.bulk-col-name {
  width: 26%;
}
.bulk-col-status {
  width: 8.5rem;
}
.bulk-review-table th {
  white-space: normal;
}
.bulk-review-table td {
  max-width: none;
  vertical-align: top;
}
.bulk-cell-index {
  font-variant-numeric: tabular-nums;
}
.bulk-cell-name > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-cell-main {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.bulk-cell-main .num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bulk-cell-meta {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.bulk-cell-problem {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 6px;
  color: var(--error);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.bulk-cell-details > .bulk-cell-problem {
  margin-top: 0;
}
.bulk-cell-note {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}
#bulk-table tr.bulk-row-error td {
  background: var(--error-ground);
}
#bulk-table tr.bulk-row-error td:first-child {
  box-shadow: inset 3px 0 0 var(--error);
}
#bulk-table tr:target td {
  background: var(--selection);
}
@container bulk-review (max-width: 34rem) {
  #bulk-table {
    border: 0;
    overflow: visible;
  }
  #bulk-table table,
  #bulk-table tbody,
  #bulk-table tr,
  #bulk-table td {
    display: block;
    width: 100%;
  }
  #bulk-table thead,
  #bulk-table colgroup {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  #bulk-table tr {
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  #bulk-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
  }
  #bulk-table td:last-child {
    border-bottom: 0;
  }
  #bulk-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
  }
  #bulk-table tr.bulk-row-error td:first-child {
    box-shadow: inset 4px 0 0 var(--error);
  }
  #bulk-table td:nth-child(n+3) {
    grid-column: 1 / -1;
  }
  #bulk-table td:nth-child(2) {
    border-left: 1px solid var(--line);
  }
}

/* src/styles/reader.css */
.reader-inputs {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
}
.reader-inputs > .advanced {
  margin: 0;
}
@media (min-width: 1024px) {
  .reader-inputs {
    position: sticky;
    top: var(--space-6);
  }
}
.drop-zone .scan-input-error {
  max-width: 40ch;
  margin: var(--space-4) auto 0;
  color: var(--error);
  text-align: start;
}
.reader-output > .section-heading {
  align-items: center;
  min-height: var(--control-height);
  margin: 0 0 var(--space-4);
}
.reader-output > .section-heading > h2 {
  margin: 0;
}
.reader-output .reader-empty {
  align-content: center;
  padding: var(--space-10) var(--space-6);
}
@media (min-width: 821px) {
  .reader-output.is-empty {
    display: flex;
    flex-direction: column;
    min-height: var(--reader-drop-h, auto);
  }
  .reader-output.is-empty > .reader-empty {
    flex: 1 1 auto;
  }
}
.scan-feedback.notice {
  margin: 0 0 var(--space-4);
}
.scan-feedback > p {
  margin: 0;
}
.reader-output > .scan-source {
  margin: 0 0 var(--space-4);
}
.reader-output .scan-results {
  margin-top: 0;
}
.reader-output .scan-result:first-child {
  margin-top: 0;
}
.scan-result-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.scan-result-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
}
.scan-result-titles {
  min-width: 0;
}
.scan-result-titles > h3 {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}
.scan-result-titles > h3:focus {
  outline: none;
}
.scan-result-meta {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
}
.scan-result > .reader-summary {
  margin-bottom: var(--space-4);
}
@container summary (max-width: 18rem) {
  .reader-summary :is([data-kind=number], .num) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
.scan-result > .notice {
  margin: 0 0 var(--space-4);
}
.scan-result > pre {
  margin: 0 0 var(--space-4);
}
.scan-result > .result-actions {
  margin: 0;
}
.scan-result > .reader-raw {
  margin-top: var(--space-4);
}
.reader-raw > .button {
  margin-top: var(--space-3);
}
@media (max-width: 480px) {
  .scan-result > .result-actions > .button {
    flex: 1 1 100%;
  }
}
.comparison-intro {
  max-width: 68ch;
  margin: var(--space-3) 0 var(--space-5);
  color: var(--muted);
}
.comparison-inputs {
  grid-template-rows: repeat(5, auto);
  row-gap: var(--space-3);
}
.comparison-side {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  align-content: start;
  min-width: 0;
}
.comparison-side > * {
  min-width: 0;
  margin: 0;
}
.comparison-side > h3 {
  font-size: var(--text-md);
}
.comparison-side > .field-help {
  margin: 0;
}
.comparison-side > .field {
  margin: 0;
}
.comparison-pick:empty {
  display: block;
}
.comparison-actions {
  margin-top: var(--space-5);
}
.comparison-status {
  margin: var(--space-4) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.comparison-status.error {
  color: var(--error);
}
@media (max-width: 820px) {
  .comparison-inputs {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: var(--space-6);
  }
  .comparison-side {
    grid-row: auto;
    grid-template-rows: none;
    row-gap: var(--space-3);
  }
  .comparison-pick:empty {
    display: none;
  }
}

/* src/styles/bank-picker.css */
@font-face {
  font-family: "Cormorant Garamond";
  src: url(/fonts/cormorant-garamond-variable.woff2?v=qAjwc1AIW8-m7M0cgLRaGXMW4DDtGTA2i_DJ16NmrNE) format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
.bank-native-control {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  clip-path: inset(50%);
  padding: 0 !important;
  border: 0 !important;
}
.bank-picker {
  position: relative;
  min-width: 0;
  container: bank-picker / inline-size;
}
.bank-picker-trigger {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--input-line);
  border-radius: var(--control-radius);
  background: var(--white);
  color: var(--ink);
  text-align: left;
}
.bank-picker-value {
  display: grid;
  gap: 3px;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.bank-picker-value > span {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--muted);
}
.bank-logo {
  width: 84px;
  height: 36px;
  max-width: 100%;
  object-fit: contain;
  flex: none;
}
.bank-logo-frame {
  display: grid;
  place-items: center;
  flex: none;
  width: 72px;
  height: 32px;
  padding: 3px 4px;
  border-radius: var(--radius-sm);
  background: var(--white);
  overflow: hidden;
}
.bank-logo-frame > .bank-logo {
  width: 100%;
  height: 100%;
  max-width: none;
}
.bank-logo-frame.is-monogram {
  background: var(--surface-muted);
}
.bank-monogram {
  color: var(--brand);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
}
.bank-picker-chevron {
  display: flex;
  flex: none;
}
@container bank-picker (max-width: 18em) {
  .bank-picker-trigger.has-bank {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 10px 12px;
  }
  .bank-picker-trigger.has-bank > .bank-logo-frame {
    grid-column: 1;
    grid-row: 1;
  }
  .bank-picker-trigger.has-bank > .bank-picker-chevron {
    grid-column: 2;
    grid-row: 1;
  }
  .bank-picker-trigger.has-bank > .bank-picker-value {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
.bank-picker-trigger:disabled {
  background: var(--disabled-ground);
  color: var(--disabled-ink);
  border-color: var(--line);
  cursor: not-allowed;
}
.bank-picker-trigger:disabled .bank-picker-chevron {
  display: none;
}
.bank-picker-trigger:disabled .bank-logo-frame {
  opacity: 0.7;
}
.bank-picker-dialog[open] {
  display: flex;
  flex-direction: column;
  height: min(780px, calc(100dvh - 2 * max(16px, 8vh)));
  overflow: hidden;
}
.bank-picker-dialog[open] > .bank-picker-grid {
  flex: 1 1 auto;
  align-content: start;
  max-height: none;
  min-height: 0;
}
.bank-picker-dialog .bank-picker-empty {
  margin: 0;
  padding: 0 4px;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.bank-picker-dialog .bank-picker-empty:not(:empty) {
  padding-top: 4px;
}
.bank-picker-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 10px 4px;
  border-bottom: 1px solid var(--line);
}
.bank-picker-group h3 {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
}
.bank-picker-group .text-button,
.bank-picker-reset {
  margin: 0;
}
.bank-picker-reset {
  align-self: flex-start;
  margin-inline-start: 4px;
}
.bank-picker-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.bank-picker-dialog > .field-label {
  margin-top: 8px;
}
.bank-picker-search {
  position: relative;
  margin: 0 0 20px;
}
.bank-picker-search > svg {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 20px;
  height: 20px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.bank-picker-search > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]):not([type=image]) {
  width: 100%;
  min-height: 48px;
  padding-inline-start: 40px;
}
.bank-picker-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-height: 56dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
}
.bank-picker-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 14px 10px;
  min-height: 76px;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  text-align: left;
}
.bank-picker-name {
  display: grid;
  gap: 4px;
  min-width: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.bank-picker-name > strong {
  font-size: var(--text-md);
}
.bank-picker-name > span {
  color: var(--muted);
  font-size: var(--text-xs);
}
.bank-picker-option:hover,
.bank-picker-option[aria-pressed=true] {
  background: var(--surface-muted);
  border-bottom-color: var(--line);
}

/* src/styles/payment-pages.css */
.payment-link-actions,
.payment-apps {
  border-top: 1px solid var(--line);
  padding-top: var(--section-gap);
  margin-top: var(--section-gap);
}
.payment-link-actions > p,
.payment-apps > p,
.payment-apps > h3,
.payment-apps > .check {
  margin: 14px 0;
}
.payment-apps > summary {
  font-weight: 600;
  min-height: 44px;
  padding: 6px 0;
}
.payment-apps > .button {
  margin: 12px 0;
}
.payer-apps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 300px;
  overflow: auto;
  padding: 3px;
  margin: 12px 0;
}
.payer-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 80px;
  padding: 12px 6px;
  border: 1px solid var(--input-line);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--ink);
  font-size: var(--text-xs);
}
.payer-app .bank-logo {
  width: 66px;
  height: 29px;
}
.payer-app[aria-pressed=true],
.payer-app:hover {
  background: var(--selection);
  border-color: var(--action);
}
.payment-page-editor {
  min-width: 0;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
}
.payment-page-editor :is(input, select, textarea):where(:not(.preview-page *)) {
  max-width: 100%;
  min-width: 0;
}
.payment-page-editor fieldset:where(:not(.preview-page *)) {
  margin: 0;
}

/* src/styles/payment-landing.css */
.donation-page {
  --theme-ground: #e9efed;
  --theme-ink: #152f3f;
  --theme-accent: #176348;
  --theme-muted: #455f57;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.84fr);
  gap: 50px;
  padding: 50px;
  min-width: 0;
  background: var(--theme-ground);
  color: var(--theme-ink);
  border-radius: var(--radius-lg);
  transition: background-color var(--motion-base) var(--ease-out);
}
.donation-story {
  align-self: start;
  padding: 16px 0;
  min-width: 0;
}
.donation-host {
  font-weight: 600;
  color: var(--theme-muted);
  margin-bottom: 20px;
  overflow-wrap: anywhere;
}
.donation-title {
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  max-width: 16ch;
  line-height: 1.12;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  margin-bottom: 25px;
}
.donation-description {
  white-space: pre-line;
  max-width: 48ch;
  line-height: 1.85;
  color: var(--theme-muted);
}
.donation-date {
  font-weight: 600;
  margin-bottom: 20px;
}
.donation-demo-recipient {
  font-size: var(--text-sm);
  color: var(--theme-muted);
  max-width: 48ch;
  margin-top: 26px;
}
.donation-transfer {
  background: var(--white);
  color: var(--ink);
  padding: 28px;
  border-radius: var(--radius-lg);
  min-width: 0;
  align-self: start;
}
.donation-transfer > h2,
.donation-transfer > h3 {
  font-size: var(--text-lg);
  margin-bottom: 22px;
}
.donation-bank {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  overflow-wrap: anywhere;
}
.donation-bank .bank-logo {
  width: 100px;
  height: 40px;
}
.donation-recipient {
  margin: 0 0 24px;
  display: grid;
  gap: 16px;
}
.donation-recipient > div {
  min-width: 0;
}
.donation-recipient dt {
  font-size: var(--text-sm);
  color: var(--muted);
}
.donation-recipient dd {
  margin: 4px 0 0;
  font-size: var(--text-lg);
  font-weight: 600;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.donation-payment-controls {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.donation-amounts > legend {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 12px;
  padding: 0;
}
.donation-amount-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.donation-amount-chip {
  min-height: calc(2.8rem + 2px);
  padding: 8px 12px;
  border: 1px solid var(--input-line);
  border-radius: var(--control-radius);
  background: var(--white);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.donation-amount-chip:hover,
.donation-amount-chip[aria-pressed=true] {
  border-color: var(--action);
  background: var(--selection);
  color: var(--brand);
}
.donation-amounts > label {
  display: block;
  margin: 12px 0 8px;
  font-size: var(--text-sm);
}
.donation-amounts > input {
  width: 100%;
  min-height: 48px;
  margin-bottom: 16px;
}
.donation-fixed-amount {
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
}
.donation-current-amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: 8px 0 14px;
}
.donation-qr {
  width: min(100%, 264px);
  margin: 14px auto;
  background: var(--white);
}
.donation-qr > svg {
  width: 100%;
  height: auto;
  display: block;
  stroke: none;
}
.donation-qr-status {
  font-size: var(--text-sm);
  margin-bottom: 16px;
}
.donation-payment-controls > .button.primary {
  width: 100%;
}
.donation-payment-controls > .button.primary:not(:disabled) {
  background: var(--theme-accent);
  border-color: var(--theme-accent);
  color: var(--white);
}
.donation-copy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 8px 0;
}
.donation-bank-check {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.65;
  padding-top: 22px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
}
.payment-demo-note {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--muted);
}
.donation-page.payment-layout .donation-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 var(--space-6);
  margin-top: calc(-1 * var(--space-4));
  padding: 0 40px var(--space-4);
}
.donation-page.payment-layout .donation-foot-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  padding: 0;
  border: 0;
  background: none;
  color: var(--theme-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: start;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.donation-page.payment-layout .donation-foot-link:hover {
  color: var(--theme-ink);
}
.donation-page.payment-layout .donation-foot-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
@container payment-landing (max-width: 44rem) {
  .donation-page.payment-layout .donation-foot {
    justify-content: flex-start;
    margin-top: calc(-1 * var(--space-2));
    padding: 0 12px var(--space-2);
  }
}
.unavailable-card {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-width: 560px;
  margin: var(--space-10) auto var(--space-16);
  padding: var(--space-10) var(--space-8) var(--space-8);
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.unavailable-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--muted);
}
.unavailable-icon > svg {
  width: 22px;
  height: 22px;
}
.unavailable-card h1 {
  margin: var(--space-2) 0 0;
  font-size: var(--text-h1);
  line-height: 1.25;
  text-wrap: balance;
}
.unavailable-card p {
  max-width: 46ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  text-wrap: pretty;
}
.unavailable-card .actions {
  justify-self: stretch;
  justify-content: center;
  margin-top: var(--space-3);
}
@media (max-width: 480px) {
  .unavailable-card {
    margin-top: var(--space-6);
    padding: var(--space-8) var(--space-5) var(--space-6);
  }
}
body[data-page=payment-landing] .main-nav,
body[data-page=coffee] .main-nav,
body[data-page=payment-landing] .header-help,
body[data-page=coffee] .header-help {
  display: none;
}
body[data-page=payment-landing] .header-utilities,
body[data-page=coffee] .header-utilities {
  margin-left: auto;
}
.money-input {
  font-variant-numeric: tabular-nums;
}
.money-readout {
  margin: 0.4rem 0 0;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.money-number {
  display: block;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
}
.money-readout.is-error {
  color: var(--error);
}
.money-readout:has(.money-suggestion) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
}
.money-readout .money-suggestion {
  min-height: 44px;
  margin: 0;
  padding-inline: 0;
}
.donation-amount-words {
  margin-top: -0.5rem;
}
.handoff-page {
  max-width: 1080px;
  margin: 0 auto;
}
#handoff-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  margin: 24px 0;
}
#handoff-content[hidden] {
  display: none;
}
.handoff-recipient,
.handoff-actions {
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.handoff-recipient h2,
.handoff-actions h2 {
  margin-top: 0;
}
.handoff-check {
  margin-top: 24px;
}
.handoff-official {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 24px 0 16px;
}
@media (max-width: 820px) {
  #handoff-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .handoff-recipient,
  .handoff-actions {
    padding: 22px 18px;
  }
}
@media (max-width: 1024px) {
  .donation-page {
    padding: 32px;
    gap: 30px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media (max-width: 820px) {
  .donation-page {
    grid-template-columns: 1fr;
    padding: 28px;
    gap: 28px;
  }
  .donation-story {
    padding: 8px 0;
  }
  .donation-title {
    font-size: 2.75rem;
  }
  .donation-transfer {
    padding: 24px;
  }
  .payment-page-row {
    flex-wrap: wrap;
  }
  .payment-page-row > div {
    flex-basis: 100%;
  }
}
@media (max-width: 480px) {
  .template-option {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
  }
  .template-paper {
    grid-row: 1 / 4;
    min-height: 154px;
    margin: 0;
    padding: 12px;
    gap: 8px;
  }
  .template-paper h3 {
    font-size: var(--text-xs);
  }
  .template-paper p {
    font-size: var(--text-xs);
    line-height: 1.5;
  }
  .template-paper .mini-qr {
    width: 68px;
    height: 68px;
  }
  .template-option > h2 {
    font-size: var(--text-md);
  }
  .template-option > p {
    margin-top: 8px;
    font-size: var(--text-xs);
  }
  .template-option > .button {
    grid-column: 2;
    justify-self: start;
  }
  .payment-page-editor {
    padding: 20px 16px;
  }
  .page-theme {
    padding: 10px;
  }
  .page-theme > strong {
    font-size: var(--text-sm);
  }
  .donation-page {
    padding: 22px 16px;
    gap: 22px;
  }
  .donation-transfer {
    padding: 20px 16px;
  }
  .donation-title {
    font-size: 2.25rem;
  }
  .bank-picker-dialog {
    padding: 18px 14px;
  }
  .bank-picker-trigger {
    gap: 8px;
    padding: 10px;
  }
  .bank-picker-trigger > .bank-logo {
    width: 66px;
    height: 30px;
  }
  .bank-picker-value > span {
    font-size: var(--text-xs);
  }
  .donation-bank {
    flex-wrap: wrap;
  }
  .payer-apps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@supports (container-type: inline-size) {
  @container public-frame (max-width: 1024px) {
    .donation-page {
      padding: 32px;
      gap: 30px;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }
  @container public-frame (max-width: 820px) {
    .donation-page {
      grid-template-columns: 1fr;
      padding: 28px;
      gap: 28px;
    }
    .donation-story {
      padding: 8px 0;
    }
    .donation-title {
      font-size: 2.75rem;
    }
    .donation-transfer {
      padding: 24px;
    }
  }
  @container public-frame (max-width: 480px) {
    .donation-page {
      padding: 22px 16px;
      gap: 22px;
    }
    .donation-transfer {
      padding: 20px 16px;
    }
    .donation-title {
      font-size: 2.25rem;
    }
    .donation-bank {
      flex-wrap: wrap;
    }
  }
}
@media (max-width: 480px) {
  body:is([data-page=payment-landing], [data-page=coffee]) .donation-page.payment-layout {
    width: auto;
    margin-inline: calc(-1 * var(--page-gutter));
    border-radius: 0;
  }
  body:is([data-page=payment-landing], [data-page=coffee]) .donation-page.payment-layout .donation-layout {
    padding: 20px var(--page-gutter) 12px;
  }
  body:is([data-page=payment-landing], [data-page=coffee]) .donation-page.payment-layout .donation-foot {
    padding-inline: var(--page-gutter);
  }
}
@supports (container-type: inline-size) {
  @container public-frame (max-width: 480px) {
    .preview-page .donation-page.payment-layout {
      width: auto;
      margin-inline: calc(-1 * var(--page-gutter));
      border-radius: 0;
    }
    .preview-page .donation-page.payment-layout .donation-layout {
      padding: 20px var(--page-gutter) 12px;
    }
    .preview-page .donation-page.payment-layout .donation-foot {
      padding-inline: var(--page-gutter);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .donation-page {
    transition: none;
  }
}
.page-share-version {
  margin: 12px 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.donation-story {
  container-type: inline-size;
  container-name: donation-story;
}
.payment-page-editor {
  container-type: inline-size;
  container-name: payment-editor;
}
@container donation-story (max-width:20rem) {
  .donation-title {
    font-size: min(3.25rem, 16cqi);
  }
}
@container payment-editor (max-width:18rem) {
  .page-theme-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.publication-security {
  margin-block: 1.5rem;
  padding-block: 1rem;
  border-block: 1px solid var(--line);
}
.publication-security h3 {
  margin-block: 0 0.75rem;
}
.publication-security ul {
  list-style: none;
  padding: 0;
  margin-block: 0 1rem;
}
.publication-security li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.45rem;
}
.publication-security li span {
  min-width: 0;
}
.publication-security li strong {
  flex-shrink: 0;
  font-size: var(--text-sm);
}
.confirmation-actions {
  margin-block: 0.75rem;
}
@media (max-width: 480px) {
  .publication-security li {
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }
}

/* src/styles/member-shell.css */
:root {
  --shell-icon-create: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23175cd3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5h5v5h-5zM11.5 3.5h5v5h-5zM3.5 11.5h5v5h-5zM11.5 11.5h2v2h-2zM14.5 14.5h2v2h-2z'/%3E%3C/svg%3E");
  --shell-icon-read: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23175cd3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V4.5A1.5 1.5 0 0 1 4.5 3H7m6 0h2.5A1.5 1.5 0 0 1 17 4.5V7m0 6v2.5a1.5 1.5 0 0 1-1.5 1.5H13m-6 0H4.5A1.5 1.5 0 0 1 3 15.5V13m0-3h14'/%3E%3C/svg%3E");
  --shell-icon-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23175cd3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 4.5h13a1.5 1.5 0 0 1 1.5 1.5v8a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 14V6a1.5 1.5 0 0 1 1.5-1.5zM7.5 10a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5zm-2.75 3c.4-1.2 1.4-1.9 2.75-1.9s2.35.7 2.75 1.9M12.5 8h3m-3 3h3'/%3E%3C/svg%3E");
  --shell-icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23175cd3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 11.5a3 3 0 0 0 4.24.06l2.6-2.6a3 3 0 0 0-4.25-4.24l-.85.85m.26 3.93a3 3 0 0 0-4.24-.06l-2.6 2.6a3 3 0 0 0 4.25 4.24l.85-.85'/%3E%3C/svg%3E");
  --shell-icon-bulk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23175cd3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 3 7 3.5-7 3.5-7-3.5zM3 10l7 3.5 7-3.5M3 13.5 10 17l7-3.5'/%3E%3C/svg%3E");
  --shell-icon-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23175cd3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7V3.5h8V7M6 14H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-2M6 11.5h8V17H6z'/%3E%3C/svg%3E");
  --shell-icon-studio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23175cd3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 2.5 6.5 3.75v7.5L10 17.5l-6.5-3.75v-7.5zm0 7.5v7.5M3.5 6.25 10 10l6.5-3.75'/%3E%3C/svg%3E");
  --shell-icon-library: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23175cd3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6A1.5 1.5 0 0 1 4 4.5h3.2L8.8 6.3H16a1.5 1.5 0 0 1 1.5 1.5v6.7A1.5 1.5 0 0 1 16 16H4a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3C/svg%3E");
  --shell-icon-guide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23175cd3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5.5C8.5 4.2 6.3 3.8 3.5 4v11c2.8-.2 5 .2 6.5 1.5m0-11c1.5-1.3 3.7-1.7 6.5-1.5v11c-2.8-.2-5 .2-6.5 1.5m0-11v11'/%3E%3C/svg%3E");
  --shell-mask-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12m-5-5 5 5-5 5'/%3E%3C/svg%3E");
  --shell-mask-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zM2.5 10h15M10 2.5c2 2.1 3 4.6 3 7.5s-1 5.4-3 7.5c-2-2.1-3-4.6-3-7.5s1-5.4 3-7.5z'/%3E%3C/svg%3E");
}
.site-header.member-shell {
  position: relative;
  container-type: normal;
}
.member-shell .shell-header-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 24px;
  min-height: var(--header-height);
  max-width: var(--container);
  margin-inline: auto;
  padding: 10px var(--page-gutter);
}
.member-shell .brand {
  gap: 8px;
  min-height: 44px;
  font-size: 1.375rem;
  line-height: 1.3;
}
.member-shell .brand svg {
  width: 28px;
  height: 28px;
}
.member-shell :is(.shell-more-panel, .shell-account-panel) :focus-visible {
  outline-color: var(--focus);
}
.member-shell:is([data-shell-session=checking], [data-shell-session=unknown]) #shell-signin,
.member-shell:is([data-shell-session=checking], [data-shell-session=unknown]) .shell-guest-only {
  visibility: hidden;
}
.shell-account-panel button[aria-disabled=true],
.shell-session-error button[aria-disabled=true] {
  cursor: progress;
  opacity: 0.75;
}
.shell-language-hint {
  position: absolute;
  z-index: var(--z-sticky);
  top: calc(100% + 8px);
  right: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 32px);
  padding: 2px 2px 2px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-2);
  font-size: var(--text-sm);
}
.shell-language-hint-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}
.shell-language-hint-close {
  color: var(--muted);
}
.shell-language-hint-close:hover {
  color: var(--ink);
}
.not-found .guide-actions {
  flex-wrap: wrap;
}
.not-found .guide-actions .button {
  white-space: nowrap;
}
.member-shell .shell-menu-panel {
  display: contents;
}
.member-shell .main-nav {
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  align-items: center;
  width: auto;
  gap: 4px;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.member-shell .main-nav > a,
.member-shell .shell-more-toggle,
.member-shell .header-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--on-brand-muted);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.member-shell .main-nav > a:hover,
.member-shell .shell-more-toggle:hover,
.member-shell .header-help:hover,
.member-shell .shell-more-toggle[aria-expanded=true] {
  background: var(--on-brand-hover);
  color: var(--white);
}
.member-shell .main-nav > a[aria-current=page],
.member-shell .header-help[aria-current=page],
.member-shell .shell-more:has(a[aria-current=page]) > .shell-more-toggle {
  color: var(--white);
}
.member-shell .main-nav > a[aria-current=page]::after,
.member-shell .header-help[aria-current=page]::after,
.member-shell .shell-more:has(a[aria-current=page]) > .shell-more-toggle::after {
  content: "";
  position: absolute;
  inset: auto 12px -10px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--focus-on-brand);
}
.member-shell .shell-more {
  position: relative;
  display: flex;
  align-items: center;
}
.member-shell .shell-more-toggle {
  cursor: pointer;
  padding-right: 8px;
}
.member-shell .shell-more-chevron {
  width: 16px;
  height: 16px;
  transition: transform var(--motion-base) var(--ease-out);
}
.member-shell .shell-more-toggle[aria-expanded=true] .shell-more-chevron {
  transform: rotate(180deg);
}
.member-shell .shell-more-panel {
  display: none;
  position: absolute;
  z-index: var(--z-overlay);
  top: calc(100% + 12px);
  left: 0;
  width: 300px;
  max-width: calc(100vw - 32px);
  gap: 2px;
  padding: 6px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.member-shell .shell-more[data-open] > .shell-more-panel {
  display: grid;
  animation: shell-panel-in var(--motion-base) var(--ease-out);
}
.member-shell:not([data-shell-ready]) .shell-more:is(:hover, :focus-within) > .shell-more-panel {
  display: grid;
}
.member-shell .shell-more-panel > a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas: "icon title" "icon note";
  align-items: center;
  column-gap: 12px;
  min-height: 60px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  white-space: normal;
}
.member-shell .shell-more-panel > a > span {
  grid-area: title;
  align-self: end;
  font-weight: 600;
  line-height: 1.35;
}
.member-shell .shell-more-panel > a > small {
  grid-area: note;
  align-self: start;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}
.member-shell .shell-more-panel > a:hover {
  background: var(--surface-muted);
}
.member-shell .shell-more-panel > a[aria-current=page] {
  background: var(--selection);
}
.member-shell .shell-more-panel > a[aria-current=page] > span {
  color: var(--brand);
}
.member-shell [data-route] {
  --shell-icon: var(--shell-icon-create);
}
.member-shell [data-route=read] {
  --shell-icon: var(--shell-icon-read);
}
.member-shell [data-route=bioPages] {
  --shell-icon: var(--shell-icon-card);
}
.member-shell [data-route=paymentPages] {
  --shell-icon: var(--shell-icon-link);
}
.member-shell [data-route=bulk] {
  --shell-icon: var(--shell-icon-bulk);
}
.member-shell [data-route=templates] {
  --shell-icon: var(--shell-icon-print);
}
.member-shell [data-route=studio] {
  --shell-icon: var(--shell-icon-studio);
}
.member-shell [data-route=library] {
  --shell-icon: var(--shell-icon-library);
}
.member-shell .shell-more-panel > a::before {
  content: "";
  grid-area: icon;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--selection) var(--shell-icon) center / 20px no-repeat;
}
.member-shell .shell-more-panel > a:is(:hover, [aria-current=page])::before {
  background-color: var(--white);
}
@keyframes shell-panel-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.member-shell .shell-utilities {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.member-shell .shell-divider {
  width: 1px;
  height: 24px;
  margin: 0 12px;
  background: var(--brand-line);
  opacity: 0.6;
}
body:is([data-page=payment-landing], [data-page=coffee], [data-page=handoff], [data-page=bio-landing]) .member-shell .shell-divider {
  display: none;
}
.member-shell .shell-signin,
.member-shell .shell-account-toggle,
.member-shell .shell-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--brand-line);
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--white);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.45;
  text-decoration: none;
  white-space: nowrap;
}
.member-shell .shell-signin-icon {
  display: none;
}
.member-shell :is(.shell-signin, .shell-account-toggle, .shell-menu-toggle) {
  position: relative;
}
.member-shell .shell-signin:hover,
.member-shell .shell-account-toggle:hover,
.member-shell .shell-account-toggle[aria-expanded=true] {
  border-color: var(--on-brand-muted);
  background: var(--brand-hover);
}
.member-shell .shell-account-toggle {
  padding-inline: 12px 10px;
}
.member-shell .shell-account-toggle:disabled {
  opacity: 0.75;
  cursor: wait;
}
.member-shell .shell-account-chevron {
  width: 16px;
  height: 16px;
}
.member-shell .shell-menu-toggle {
  display: none;
}
.member-shell .shell-mobile-only,
.member-shell .main-nav .shell-mobile-only,
.member-shell .shell-group-title {
  display: none;
}
.member-shell :is(.language-switch, .shell-language) {
  flex-shrink: 0;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  margin-left: 4px;
  padding: 0 10px;
  border: 0;
  color: var(--on-brand-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
.member-shell .language-switch::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--shell-mask-globe) center / 18px no-repeat;
  mask: var(--shell-mask-globe) center / 18px no-repeat;
  forced-color-adjust: none;
}
.member-shell .language-switch:hover {
  color: var(--white);
  background: var(--on-brand-hover);
}
.shell-noscript {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 20px;
  padding: 8px 16px;
  background: var(--white);
}
.shell-noscript a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (max-width: 1279px) {
  .shell-noscript {
    display: flex;
  }
}
.member-shell .shell-menu-toggle:is(.shell-menu-fallback, .shell-menu-fallback-close) {
  display: none;
}
@media (max-width: 1279px) {
  .member-shell .shell-menu-toggle:disabled {
    display: none;
  }
  .member-shell .shell-menu-toggle:disabled ~ .shell-menu-toggle.shell-menu-fallback {
    display: inline-flex;
  }
  .member-shell:has(.shell-menu-panel:target) .shell-menu-toggle:disabled ~ .shell-menu-toggle.shell-menu-fallback {
    display: none;
  }
  .member-shell:has(.shell-menu-panel:target) .shell-menu-toggle:disabled ~ .shell-menu-toggle.shell-menu-fallback-close {
    display: inline-flex;
  }
  .member-shell:has(.shell-menu-toggle:disabled) .shell-menu-panel:target {
    display: grid;
  }
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: var(--control-radius);
}
.icon-button:hover {
  background: var(--surface-muted);
}
.icon-button svg {
  width: 20px;
  height: 20px;
}
.shell-member {
  position: relative;
  display: flex;
  align-items: center;
}
.shell-account-panel {
  position: absolute;
  z-index: var(--z-sticky);
  top: calc(100% + 12px);
  right: 0;
  width: 264px;
  max-width: calc(100vw - 32px);
  max-height: min(520px, 65dvh);
  overflow-y: auto;
  scrollbar-color: var(--input-line) var(--surface-muted);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-2);
}
.shell-account-panel a,
.shell-account-panel button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 44px;
  color: var(--ink);
  font-size: var(--text-sm);
  text-decoration: none;
  text-align: left;
  line-height: 1.5;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
}
.shell-account-panel a:hover,
.shell-account-panel button:hover {
  color: var(--action);
  background: var(--surface-muted);
}
.shell-account-name {
  padding: 8px 12px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.shell-account-name:has(> .shell-set-name) {
  padding: 0 0 4px;
}
.shell-account-panel .shell-account-name > .shell-set-name {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.shell-account-panel button {
  margin-top: 6px;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.shell-session-error {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  grid-template-areas: "icon text actions close";
  align-items: center;
  column-gap: var(--space-3);
  width: fit-content;
  max-width: min(40rem, calc(100% - 2 * var(--page-gutter)));
  margin: 0 max(var(--page-gutter), calc((100% - var(--container)) / 2 + var(--page-gutter))) var(--space-3) auto;
  padding: 0 0 0 14px;
  border: 1px solid var(--warning-line);
  border-radius: var(--radius);
  background: var(--warning);
  color: var(--warning-ink);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.shell-session-error::before {
  content: "";
  grid-area: icon;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icon-warning) center / 18px no-repeat;
  mask: var(--icon-warning) center / 18px no-repeat;
  forced-color-adjust: none;
}
.shell-session-error p {
  grid-area: text;
  padding-block: 10px;
}
.shell-session-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 0 var(--space-2);
}
.shell-session-error .shell-session-close {
  grid-area: close;
  color: var(--warning-ink);
}
.shell-session-error .shell-session-close:hover {
  background: rgb(0 0 0 / 6%);
}
.shell-session-error .shell-session-close:focus-visible,
.shell-session-actions :focus-visible {
  outline-color: var(--focus);
}
@media (max-width: 820px) {
  .shell-session-error {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    grid-template-areas: "icon text close" ". actions actions";
    width: auto;
    max-width: none;
    margin-inline: var(--page-gutter);
  }
  .shell-session-error p {
    padding-bottom: 0;
  }
  .shell-session-actions {
    margin-inline-start: -8px;
  }
}
.shell-session-error a {
  color: var(--warning-ink);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}
.shell-session-actions button {
  border: 0;
  background: transparent;
  color: var(--warning-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
  padding-inline: 8px;
  font-weight: 600;
}
@media (forced-colors: active) {
  .member-shell :is(.main-nav > a, .header-help, .language-switch, .shell-signin) {
    color: LinkText;
  }
  .member-shell :is(.shell-more-toggle, .shell-account-toggle, .shell-menu-toggle) {
    color: ButtonText;
  }
  .member-shell .brand .brand-lockup {
    forced-color-adjust: none;
    border-radius: var(--radius-sm);
    background: var(--brand);
    box-shadow: 0 0 0 6px var(--brand);
  }
  .member-shell .main-nav > a[aria-current=page]::after,
  .member-shell .header-help[aria-current=page]::after,
  .member-shell .shell-more:has(a[aria-current=page]) > .shell-more-toggle::after {
    forced-color-adjust: none;
    background: Highlight;
  }
  .member-shell[data-compact] .shell-menu-panel a[aria-current=page] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  .shell-session-error::before {
    background-color: CanvasText;
  }
}
@media (forced-colors: active) and (max-width: 1279px) {
  .member-shell .shell-menu-panel a[aria-current=page] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}

/* src/styles/page-end.css */
.below-workbench {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 48px;
  margin: var(--space-12) 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.below-workbench h2 {
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}
.below-workbench p {
  max-width: 62ch;
  margin: 10px 0 4px;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.below-workbench > div > a {
  display: inline-block;
  min-height: var(--control-height);
  padding-block: 12px;
  color: var(--action);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}
.below-workbench > div > a::after {
  content: "     ";
  padding-left: 5px;
  background-color: currentColor;
  -webkit-mask: var(--shell-mask-arrow) right center / 16px no-repeat;
  mask: var(--shell-mask-arrow) right center / 16px no-repeat;
  forced-color-adjust: none;
}
.below-workbench > div > a:hover,
.related-guide .text-link:hover {
  color: var(--action-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.tool-more {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: var(--space-12);
}
.tool-more .below-workbench {
  grid-column: span 2;
  grid-template-columns: subgrid;
  column-gap: normal;
  row-gap: 20px;
  margin: 0;
  padding: 0;
  border: 0;
}
.tool-more .below-workbench > div,
.tool-more-index {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 22px 24px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.tool-more .below-workbench p {
  margin-bottom: 12px;
  font-size: var(--text-md);
}
.tool-more .below-workbench > div > a {
  margin-top: auto;
}
.qr-kind-links {
  width: 100%;
}
.qr-kind-links h2 {
  margin-bottom: 6px;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}
.qr-kind-links > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}
.qr-kind-links > div > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  text-decoration: none;
}
.qr-kind-links > div > a > span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.3;
  transition:
    background-color var(--control-time) ease-out,
    border-color var(--control-time) ease-out,
    color var(--control-time) ease-out;
}
.qr-kind-links > div > a:hover > span {
  border-color: var(--action);
  background: var(--selection);
  color: var(--brand);
}
.qr-kind-links > div > a:focus-visible {
  outline: none;
}
.qr-kind-links > div > a:focus-visible > span {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
@media (pointer: fine) and (min-width: 641px) {
  .tool-more nav.qr-kind-links > div > a {
    min-block-size: 36px;
    min-height: 36px;
  }
}
.related-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin: var(--space-12) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
main:has(> .wide-content) > .related-guide {
  max-width: var(--container-tool);
  margin-inline: 0;
}
main:has(> .guide-article) > .related-guide {
  max-width: var(--container-reading);
  margin-inline: 0;
}
.related-guide-label {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.related-guide .text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--control-height);
  color: var(--action);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: normal;
}
.related-guide .text-link::before {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: var(--selection) var(--shell-icon-guide) center / 18px no-repeat;
}
.tool-more-index .related-guide {
  display: grid;
  justify-items: start;
  gap: 0;
  width: 100%;
  margin: auto 0 0;
  padding-top: 12px;
}
.tool-more-index .qr-kind-links {
  margin-bottom: 12px;
}
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--text-sm);
}
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px var(--page-gutter) 32px;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 3fr);
  gap: 32px 48px;
}
.footer-about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.footer-brand .brand-lockup {
  width: 150px;
  height: auto;
  aspect-ratio: 390.838 / 80;
  display: block;
}
@media (forced-colors: active) {
  .footer-brand .brand-lockup {
    forced-color-adjust: none;
    border-radius: var(--radius-sm);
    background: var(--white);
    box-shadow: 0 0 0 6px var(--white);
  }
}
.footer-tagline {
  max-width: 30ch;
  color: var(--muted);
  line-height: var(--leading-body);
}
.footer-donate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 8px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.footer-donate:hover {
  border-color: var(--donate);
  color: var(--donate);
}
.footer-donate .donate-heart {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--donate);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.footer-nav {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 32px;
}
.footer-group-product ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  column-gap: 32px;
}
.footer-heading {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
}
.footer-group {
  min-width: 0;
}
.footer-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  line-height: var(--leading-snug);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.footer-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.footer-nav a[aria-current=page] {
  color: var(--ink);
  font-weight: 600;
}
@media (pointer: fine) and (min-width: 641px) {
  .footer-nav a {
    min-height: 32px;
  }
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 32px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  line-height: var(--leading-body);
}
.footer-limit {
  max-width: 72ch;
}
.footer-note a {
  color: var(--ink);
  text-decoration-color: var(--line);
}
.footer-note a:hover {
  color: var(--action);
  text-decoration-color: currentColor;
}
@media (min-width: 641px) and (max-width: 1024px) {
  .footer-inner {
    padding-top: 40px;
    padding-bottom: 28px;
  }
  .site-footer:not(.banker-footer) .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 28px 32px;
  }
  .site-footer:not(.banker-footer) .footer-about {
    grid-column: 1;
    grid-row: 1;
  }
  .site-footer:not(.banker-footer) .footer-nav {
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    pointer-events: none;
  }
  .site-footer:not(.banker-footer) .footer-nav > * {
    pointer-events: auto;
  }
  .footer-group-product {
    grid-column: 2;
    grid-row: 1;
  }
  .footer-group-learn {
    grid-column: 1;
    grid-row: 2;
  }
  .footer-group-legal {
    grid-column: 2;
    grid-row: 2;
  }
  body:is([data-page=payment-landing], [data-page=coffee], [data-page=handoff]) .footer-group-legal {
    grid-row: 1;
  }
  .footer-bottom {
    margin-top: 32px;
  }
}
@media (max-width: 1024px) {
  .tool-more {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tool-more .below-workbench,
  .tool-more-index {
    grid-column: 1 / -1;
  }
  .tool-more-index .related-guide {
    display: flex;
    gap: 4px 16px;
  }
}
@media (max-width: 640px) {
  .below-workbench {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 40px;
    padding-top: 24px;
  }
  .tool-more {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 32px;
  }
  .tool-more .below-workbench {
    row-gap: 12px;
  }
  .tool-more .below-workbench > div,
  .tool-more-index {
    padding: 18px 16px 8px;
  }
  .footer-inner {
    padding-top: 32px;
    padding-bottom: 24px;
  }
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .footer-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 16px;
  }
  .footer-tagline {
    grid-column: 1 / -1;
    max-width: none;
  }
  .footer-donate {
    grid-row: 1;
    grid-column: 2;
    margin-top: 0;
  }
  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
  }
  .footer-group-product {
    grid-column: 1 / -1;
  }
  .footer-group-product ul {
    column-gap: 20px;
  }
  .footer-bottom {
    flex-direction: column;
    margin-top: 28px;
    padding-top: 16px;
  }
}

/* src/styles/workbench-layout.css */
.advanced > summary,
.payload-detail > summary,
.guide-article details > summary,
.payment-apps > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  list-style: none;
  padding-block: 10px;
  border-radius: var(--radius-sm);
}
.advanced > summary::marker,
.payload-detail > summary::marker,
.guide-article details > summary::marker,
.payment-apps > summary::marker {
  content: "";
}
summary::-webkit-details-marker {
  display: none;
}
.advanced > summary::after,
.payload-detail > summary::after,
.guide-article details > summary::after,
.payment-apps > summary::after {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background-color: currentColor;
  -webkit-mask: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 5 5 5-5 5'/%3E%3C/svg%3E");
  mask: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 5 5 5-5 5'/%3E%3C/svg%3E");
  forced-color-adjust: none;
}
.advanced[open] > summary::after,
.payload-detail[open] > summary::after,
.guide-article details[open] > summary::after,
.payment-apps[open] > summary::after {
  transform: rotate(90deg);
}
.advanced > summary:hover,
.payload-detail > summary:hover,
.payment-apps > summary:hover {
  color: var(--action);
}
.bank-picker-trigger {
  border: 1px solid var(--input-line);
  min-height: var(--input-height);
  padding: 8px 12px;
  transition: border-color var(--motion-fast) ease-out;
}
.bank-picker-trigger:hover:not(:disabled) {
  border-color: var(--muted);
  background: var(--white);
}
.bank-picker-trigger:focus-visible {
  border-color: var(--action);
}

/* src/styles/shell-responsive.css */
@media (max-width: 1279px) {
  .member-shell .shell-header-inner {
    min-height: 64px;
    padding-block: 10px;
    gap: 12px 16px;
  }
  .member-shell .shell-desktop-only {
    display: none;
  }
  .member-shell .shell-menu-toggle {
    display: inline-flex;
    width: 44px;
    padding: 10px;
    border-color: transparent;
    background: var(--brand-hover);
  }
  .member-shell .shell-menu-toggle:hover,
  .member-shell .shell-menu-toggle[aria-expanded=true] {
    background: var(--brand-current);
  }
  .shell-menu-toggle > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .member-shell .shell-menu-panel {
    display: none;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    align-items: start;
    position: absolute;
    z-index: var(--z-overlay);
    top: 100%;
    inset-inline: max(0px, calc((100% - var(--container)) / 2));
    gap: 20px 24px;
    max-height: calc(100dvh - var(--shell-header-bottom, 64px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px var(--page-gutter) 8px;
    color: var(--ink);
    background: var(--surface);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-3);
  }
  .member-shell .shell-menu-panel[data-open] {
    display: grid;
    animation: shell-panel-in var(--motion-base) var(--ease-out);
  }
  .member-shell .shell-menu-panel :focus-visible {
    outline-color: var(--focus);
  }
  .member-shell:has(.shell-menu-panel:is([data-open], :target))::after {
    content: "";
    position: fixed;
    z-index: calc(var(--z-overlay) - 1);
    inset: var(--shell-header-bottom, 64px) 0 0;
    background: var(--backdrop);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    pointer-events: none;
    animation: shell-backdrop-in var(--motion-base) var(--ease-out);
  }
  html:has(#shell-menu-panel[data-open]) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }
  .member-shell .shell-menu-panel .main-nav,
  .member-shell .shell-manage-nav {
    display: grid;
    align-items: stretch;
    gap: 4px 8px;
    width: auto;
    margin: 0;
    padding: 0;
  }
  .member-shell .shell-menu-panel .main-nav {
    grid-template-columns: repeat(auto-fill, minmax(max(8.5rem, calc((100% - 16px) / 3)), 1fr));
  }
  .member-shell .shell-manage-nav {
    grid-template-columns: minmax(0, 1fr);
  }
  .member-shell .shell-more,
  .member-shell .shell-more-panel {
    display: contents;
  }
  .member-shell .shell-more-toggle,
  .member-shell .shell-more-panel > a > small,
  .member-shell .main-nav .shell-desktop-only {
    display: none;
  }
  .member-shell .main-nav .shell-mobile-only {
    display: flex;
  }
  .member-shell .shell-menu-panel .main-nav > a,
  .member-shell .shell-more-panel > a,
  .member-shell .shell-manage-nav a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 52px;
    padding: 6px 10px 6px 6px;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .member-shell .shell-more-panel > a > span {
    align-self: center;
  }
  .member-shell .shell-menu-panel .main-nav > a::before,
  .member-shell .shell-more-panel > a::before,
  .member-shell .shell-manage-nav a::before {
    content: "";
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--selection) var(--shell-icon) center / 20px no-repeat;
  }
  .member-shell .shell-menu-panel .main-nav > a:hover,
  .member-shell .shell-more-panel > a:hover,
  .member-shell .shell-manage-nav a:hover {
    background: var(--surface-muted);
    color: var(--ink);
  }
  .member-shell .shell-menu-panel .main-nav > a[aria-current=page],
  .member-shell .shell-more-panel > a[aria-current=page],
  .member-shell .shell-manage-nav a[aria-current=page] {
    background: var(--selection);
    color: var(--brand);
  }
  .member-shell .main-nav > a[aria-current=page]::after {
    content: none;
  }
  .member-shell .shell-menu-panel :is(.main-nav > a, .shell-more-panel > a, .shell-manage-nav a):is(:hover, [aria-current=page])::before {
    background-color: var(--white);
  }
  .member-shell .shell-group-title {
    display: block;
    grid-column: 1 / -1;
    padding: 0 6px 6px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .member-shell .shell-menu-foot {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 24px;
    margin: 0 calc(-1 * var(--page-gutter));
    padding: 4px calc(var(--page-gutter) + 6px) 0;
    border-top: 1px solid var(--line);
  }
  .shell-menu-foot > a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    color: var(--muted);
    text-decoration: none;
    font-size: var(--text-sm);
  }
  .shell-menu-foot > a:hover {
    color: var(--action);
  }
  .member-shell .shell-signin {
    padding-inline: 14px;
  }
  .member-shell .language-switch {
    margin-left: 0;
  }
}
.member-shell[data-compact] .shell-header-inner {
  min-height: 64px;
  padding-block: 10px;
  gap: 12px 16px;
}
.member-shell[data-compact] .shell-desktop-only {
  display: none;
}
.member-shell[data-compact] .shell-menu-toggle {
  display: inline-flex;
  width: 44px;
  padding: 10px;
  border-color: transparent;
  background: var(--brand-hover);
}
.member-shell[data-compact] .shell-menu-toggle:hover,
.member-shell[data-compact] .shell-menu-toggle[aria-expanded=true] {
  background: var(--brand-current);
}
.member-shell[data-compact] .shell-menu-toggle > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.member-shell[data-compact] .shell-menu-panel {
  display: none;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  align-items: start;
  position: absolute;
  z-index: var(--z-overlay);
  top: 100%;
  inset-inline: max(0px, calc((100% - var(--container)) / 2));
  gap: 20px 24px;
  max-height: calc(100dvh - var(--shell-header-bottom, 64px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px var(--page-gutter) 8px;
  color: var(--ink);
  background: var(--surface);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-3);
}
.member-shell[data-compact] .shell-menu-panel[data-open] {
  display: grid;
  animation: shell-panel-in var(--motion-base) var(--ease-out);
}
.member-shell[data-compact] .shell-menu-panel :focus-visible {
  outline-color: var(--focus);
}
.member-shell[data-compact]:has(.shell-menu-panel:is([data-open], :target))::after {
  content: "";
  position: fixed;
  z-index: calc(var(--z-overlay) - 1);
  inset: var(--shell-header-bottom, 64px) 0 0;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  pointer-events: none;
  animation: shell-backdrop-in var(--motion-base) var(--ease-out);
}
html:has(.member-shell[data-compact] #shell-menu-panel[data-open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}
.member-shell[data-compact] .shell-menu-panel .main-nav,
.member-shell[data-compact] .shell-manage-nav {
  display: grid;
  align-items: stretch;
  gap: 4px 8px;
  width: auto;
  margin: 0;
  padding: 0;
}
.member-shell[data-compact] .shell-menu-panel .main-nav {
  grid-template-columns: repeat(auto-fill, minmax(max(8.5rem, calc((100% - 16px) / 3)), 1fr));
}
.member-shell[data-compact] .shell-manage-nav {
  grid-template-columns: minmax(0, 1fr);
}
.member-shell[data-compact] .shell-more,
.member-shell[data-compact] .shell-more-panel {
  display: contents;
}
.member-shell[data-compact] .shell-more-toggle,
.member-shell[data-compact] .shell-more-panel > a > small,
.member-shell[data-compact] .main-nav .shell-desktop-only {
  display: none;
}
.member-shell[data-compact] .main-nav .shell-mobile-only {
  display: flex;
}
.member-shell[data-compact] .shell-menu-panel .main-nav > a,
.member-shell[data-compact] .shell-more-panel > a,
.member-shell[data-compact] .shell-manage-nav a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 52px;
  padding: 6px 10px 6px 6px;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.member-shell[data-compact] .shell-more-panel > a > span {
  align-self: center;
}
.member-shell[data-compact] .shell-menu-panel .main-nav > a::before,
.member-shell[data-compact] .shell-more-panel > a::before,
.member-shell[data-compact] .shell-manage-nav a::before {
  content: "";
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--selection) var(--shell-icon) center / 20px no-repeat;
}
.member-shell[data-compact] .shell-menu-panel .main-nav > a:hover,
.member-shell[data-compact] .shell-more-panel > a:hover,
.member-shell[data-compact] .shell-manage-nav a:hover {
  background: var(--surface-muted);
  color: var(--ink);
}
.member-shell[data-compact] .shell-menu-panel .main-nav > a[aria-current=page],
.member-shell[data-compact] .shell-more-panel > a[aria-current=page],
.member-shell[data-compact] .shell-manage-nav a[aria-current=page] {
  background: var(--selection);
  color: var(--brand);
}
.member-shell[data-compact] .main-nav > a[aria-current=page]::after {
  content: none;
}
.member-shell[data-compact] .shell-menu-panel :is(.main-nav > a, .shell-more-panel > a, .shell-manage-nav a):is(:hover, [aria-current=page])::before {
  background-color: var(--white);
}
.member-shell[data-compact] .shell-group-title {
  display: block;
  grid-column: 1 / -1;
  padding: 0 6px 6px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.member-shell[data-compact] .shell-menu-foot {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0 calc(-1 * var(--page-gutter));
  padding: 4px calc(var(--page-gutter) + 6px) 0;
  border-top: 1px solid var(--line);
}
.member-shell[data-compact] .shell-menu-foot > a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--muted);
  text-decoration: none;
  font-size: var(--text-sm);
}
.member-shell[data-compact] .shell-menu-foot > a:hover {
  color: var(--action);
}
.member-shell[data-compact] .shell-signin {
  padding-inline: 14px;
}
.member-shell[data-compact] .language-switch {
  margin-left: 0;
}
.member-shell[data-compact] .shell-menu-toggle:is(.shell-menu-fallback, .shell-menu-fallback-close) {
  display: none;
}
@media (scripting: enabled) {
  .member-shell .shell-header-inner {
    flex-wrap: nowrap;
  }
  .member-shell[data-shell-ready] .shell-header-inner {
    overflow-x: clip;
  }
  .member-shell[data-wrap] .shell-header-inner {
    flex-wrap: wrap;
  }
}
.member-shell[data-tight] .shell-header-inner {
  gap: 6px;
}
.member-shell[data-tight] .shell-utilities {
  gap: 2px;
}
.member-shell[data-tight] .brand .brand-lockup {
  width: clamp(96px, calc(100vw - 248px), 164px);
}
.member-shell[data-tight] :is(.shell-signin, .shell-account-toggle) {
  min-width: 44px;
  padding-inline: 10px;
}
.member-shell[data-tight] .shell-signin-icon {
  display: block;
}
.member-shell[data-tight] :is(.shell-signin, .shell-account-toggle) > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.member-shell[data-tight] .shell-account-chevron {
  display: none;
}
@keyframes shell-backdrop-in {
  from {
    opacity: 0;
  }
}
@media (max-width: 640px) {
  .member-shell .shell-header-inner {
    min-height: 64px;
    gap: 10px;
  }
  .member-shell .brand {
    gap: 8px;
    font-size: var(--text-lg);
  }
  .member-shell .brand svg {
    width: 24px;
    height: 24px;
  }
  .member-shell .shell-utilities {
    gap: 6px;
  }
  .member-shell .shell-signin,
  .member-shell .shell-account-toggle {
    padding: 8px 8px;
    font-size: var(--text-sm);
    gap: 6px;
  }
  .member-shell .shell-account-toggle {
    min-width: 44px;
    justify-content: center;
  }
  .member-shell .shell-account-toggle > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .member-shell .shell-account-chevron {
    width: 12px;
    height: 12px;
  }
  .member-shell .shell-menu-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    max-height: calc(100dvh - var(--shell-header-bottom, 64px));
  }
  .member-shell .shell-menu-foot {
    grid-column: auto;
  }
  .workbench-heading {
    margin-bottom: 22px;
  }
  .workbench-heading h1 {
    font-size: var(--text-h1);
  }
  .workspace {
    padding: 20px 16px;
  }
  .workspace .editor-pane,
  .workspace .output-pane {
    padding: 0;
  }
  .workspace .qr-preview:has(.qr-empty) {
    min-height: 190px;
    padding: 20px 12px;
  }
}
@media (max-width: 640px) {
  .member-shell .shell-signin,
  .member-shell .shell-account-toggle {
    padding: 0 10px;
  }
  .member-shell .language-switch {
    padding: 0;
  }
  .member-shell .language-switch::before {
    display: none;
  }
  .member-shell .shell-menu-panel {
    gap: 16px;
    padding-block: 16px 4px;
  }
  .member-shell:has(.shell-menu-panel:is([data-open], :target))::after {
    inset: var(--shell-header-bottom, 64px) 0 0;
  }
  .member-shell .shell-menu-foot {
    gap: 0 20px;
  }
}
@media (max-width: 380px) {
  .member-shell .shell-header-inner {
    gap: 8px;
  }
  .member-shell .brand {
    font-size: var(--text-md);
    gap: 4px;
  }
  .member-shell .brand svg {
    width: 22px;
    height: 22px;
  }
  .member-shell .shell-signin {
    padding-inline: 8px;
  }
  .member-shell .shell-menu-panel :is(.main-nav > a, .shell-more-panel > a, .shell-manage-nav a) {
    gap: 10px;
    padding-left: 4px;
  }
  .member-shell .shell-menu-panel :is(.main-nav > a, .shell-more-panel > a, .shell-manage-nav a)::before {
    width: 36px;
    height: 36px;
  }
}
@media (max-width: 360px) {
  .member-shell .shell-header-inner {
    gap: 6px;
  }
  .member-shell .shell-utilities {
    gap: 2px;
  }
  .member-shell .brand .brand-lockup {
    width: clamp(96px, calc(100vw - 248px), 164px);
  }
  .member-shell .shell-signin {
    white-space: nowrap;
    padding-inline: 6px;
  }
}
@media print {
  .site-header.member-shell,
  .shell-session-error {
    display: none !important;
  }
}

/* src/styles/auth-settings-controls.css */
.google-auth-settings {
  max-width: 760px;
}
.google-auth-settings > .field-help {
  margin-block: 1rem;
}
.google-auth-settings > .notice {
  margin-block: 1rem;
}
.google-auth-settings fieldset > .check {
  margin-block: 1rem;
}
.google-auth-settings fieldset > .button {
  margin-block: 0.5rem 1rem;
}
.google-auth-callback {
  margin-block: 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.google-auth-callback > label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.google-auth-callback > input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--input-line);
  border-radius: var(--control-radius);
  color: var(--ink);
  background: var(--white);
}
.google-auth-callback > .button {
  margin-top: 1rem;
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 16px;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  max-width: calc(100% - 32px);
}
.skip-link:focus {
  width: auto;
  height: auto;
  padding: 12px;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}
@media (max-width: 1279px) {
  .member-shell .shell-menu-panel .main-nav,
  .member-shell .shell-manage-nav,
  .member-shell .shell-menu-foot {
    order: 0;
  }
}
.field input:not(:disabled),
.field select:not(:disabled),
.field textarea:not(:disabled) {
  border-color: var(--input-line);
}
.google-auth-settings > .actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]):not([type=image]),
select:not([multiple]):not([size]),
select:not([multiple])[size="0"],
select:not([multiple])[size="1"] {
  box-sizing: border-box;
  font: inherit;
  font-size: var(--text-md);
  line-height: 1.55;
  min-block-size: var(--input-height);
  padding-block: 0.625em;
  padding-inline: 0.75em;
}
select:not([multiple]):not([size]),
select:not([multiple])[size="0"],
select:not([multiple])[size="1"] {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23183440' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 1.1em 1.1em;
}
.field textarea,
textarea {
  box-sizing: border-box;
  font: inherit;
  font-size: var(--text-md);
  line-height: 1.55;
  min-block-size: 6.25em;
  padding: 0.625em 0.75em;
}
@media (forced-colors: active) {
  select:not([multiple]):not([size]),
  select:not([multiple])[size="0"],
  select:not([multiple])[size="1"] {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none;
  }
}

/* src/styles/clipboard-exports.css */
.clipboard-fallback {
  width: min(100% - 2rem, 38rem);
  max-height: calc(100dvh - 2rem);
  padding: clamp(1rem, 4vw, 1.75rem);
}
.clipboard-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.clipboard-heading h2 {
  margin: 0;
}
.clipboard-fallback > .field-help {
  margin-block: 0.75rem 1.25rem;
}
.clipboard-image {
  max-height: 50dvh;
  overflow: auto;
  background: var(--ground, var(--ground));
  padding: 1rem;
  border-radius: var(--radius-lg);
}
.clipboard-image img {
  display: block;
  max-width: 100%;
  max-height: 45dvh;
  width: auto;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}
.clipboard-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.clipboard-actions .button {
  min-height: 44px;
  white-space: normal;
}
.donation-image-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
@media (max-width: 380px) {
  .clipboard-actions .button {
    flex: 1 1 100%;
  }
}
.image-export-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.image-export-actions > :is(button, .button),
.card-downloads.image-export-actions > :first-child,
.export-actions.image-export-actions > .primary {
  grid-column: auto;
  min-width: 0;
  min-height: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.card-downloads.image-export-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.image-export-actions {
  container: image-exports / inline-size;
}
@container image-exports (max-width: 18rem) {
  .card-downloads.image-export-actions > .button,
  .export-actions.image-export-actions > .button,
  .actions.image-export-actions > .button {
    grid-column: 1 / -1;
  }
}

/* src/styles/component-families.css */
:is(.type-shortcuts, .studio-workspace .studio-panel-tabs, .bio-tabs, .payment-editor-tabs, .segmented) {
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--surface-muted);
  border-radius: var(--control-radius);
}
:is(.type-picker .type-shortcuts > button, .studio-panel-tabs button, .bio-tabs button, .payment-editor-tabs button, .segmented > button) {
  min-height: var(--control-height);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
}
:is(.type-picker .type-shortcuts > button, .studio-panel-tabs button, .bio-tabs button, .payment-editor-tabs button, .segmented > button):not(:disabled):not([aria-pressed=true]):not([aria-selected=true]):hover {
  color: var(--ink);
  background: var(--selection);
}
:is(.type-picker .type-shortcuts > button, .studio-panel-tabs button, .bio-tabs button, .payment-editor-tabs button, .segmented > button):is([aria-pressed=true], [aria-selected=true]) {
  background: var(--brand);
  color: var(--white);
}
.segmented {
  display: inline-flex;
}
:is(.segmented, .bio-preview-views) {
  flex-wrap: wrap;
  max-width: 100%;
}
.segmented > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  white-space: nowrap;
}
.segmented > button > svg {
  width: 16px;
  height: 16px;
}
.segmented > button:focus-visible {
  outline-offset: -2px;
}
:is(.chip-row button, .chip-row > a, .print-gallery-filters button, .bio-category-tabs button, .bank-app-filters button, .version-picker button) {
  min-height: var(--control-height);
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
}
.chip-row > a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}
:is(.chip-row button, .chip-row > a, .print-gallery-filters button, .bio-category-tabs button, .bank-app-filters button, .version-picker button):not([aria-pressed=true], [aria-current=true]):hover {
  border-color: var(--input-line);
  background: var(--surface-muted);
  color: var(--ink);
}
:is(.chip-row button, .chip-row > a, .print-gallery-filters button, .bio-category-tabs button, .bank-app-filters button, .version-picker button):is([aria-pressed=true], [aria-current=true]) {
  border-color: transparent;
  background: var(--selection);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--action);
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
@media (max-width: 640px) {
  .chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--chip-bleed, var(--page-gutter)));
    padding-inline: var(--chip-bleed, var(--page-gutter));
    scroll-padding-inline: var(--chip-bleed, var(--page-gutter));
    -webkit-mask-image:
      linear-gradient(
        to right,
        #000 calc(100% - var(--chip-bleed, var(--page-gutter))),
        transparent);
    mask-image:
      linear-gradient(
        to right,
        #000 calc(100% - var(--chip-bleed, var(--page-gutter))),
        transparent);
  }
  .chip-row::-webkit-scrollbar {
    display: none;
  }
  .chip-row > * {
    flex: none;
  }
  .chip-row :is(button, a):focus-visible {
    outline-offset: -3px;
  }
}
.print-palettes button[aria-pressed=true] {
  box-shadow: inset 0 0 0 1px var(--action);
}
@media (forced-colors: active) {
  :is(.studio-panel-tabs button, .bio-tabs button, .payment-editor-tabs button, .segmented > button, .chip-row button, .chip-row > a, .print-gallery-filters button, .bio-category-tabs button, .bank-app-filters button, .version-picker button):is([aria-pressed=true], [aria-selected=true], [aria-current=true]) {
    outline: 2px solid Highlight;
  }
}
.choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 0;
  height: 100%;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: start;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--motion-fast) ease-out, box-shadow var(--motion-fast) ease-out;
}
.choice-card:hover {
  border-color: var(--input-line);
  box-shadow: var(--shadow-1);
}
.choice-card[aria-pressed=true] {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--action);
}
.choice-card[aria-pressed=true]::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--action) var(--icon-check-white) center / 14px no-repeat;
  box-shadow: 0 0 0 2px var(--surface);
}
.choice-card:has(:focus-visible),
.choice-card:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.choice-card-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
}
.choice-card img,
.choice-card svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
@media (forced-colors: active) {
  .choice-card[aria-pressed=true] {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
  .choice-card[aria-pressed=true]::after {
    forced-color-adjust: none;
    background: CanvasText;
    -webkit-mask: var(--icon-check) center / 16px no-repeat;
    mask: var(--icon-check) center / 16px no-repeat;
    box-shadow: none;
  }
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--surface-muted);
  color: var(--ink);
}
.badge > svg {
  width: 14px;
  height: 14px;
}
.badge.success {
  background: var(--success-ground);
  color: var(--success);
}
.badge.warning {
  background: var(--warning);
  color: var(--warning-ink);
}
.badge.danger {
  background: var(--error-ground);
  color: var(--error);
}
.badge.info {
  background: var(--selection);
  color: var(--brand);
}
@media (forced-colors: active) {
  .badge {
    border: 1px solid CanvasText;
  }
}
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.empty-state.is-plain {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding-block: var(--space-8);
}
.empty-state-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ground);
  color: var(--muted);
}
.empty-state.is-plain .empty-state-icon {
  background: var(--surface-muted);
}
.empty-state-icon > svg {
  width: 24px;
  height: 24px;
}
.empty-state :is(h2, h3, h4) {
  margin: 0;
  font-size: var(--text-lg);
}
.empty-state p {
  max-width: 46ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  text-wrap: balance;
}
.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
.skeleton {
  opacity: 0;
  animation: skeleton-in 1ms linear 250ms forwards;
}
.skeleton-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  min-height: 72px;
  padding: var(--space-3) var(--space-5);
}
.skeleton-row + .skeleton-row {
  border-top: 1px solid var(--line);
}
.skeleton-field {
  display: grid;
  gap: 8px;
  margin-bottom: var(--space-4);
}
.skeleton-card {
  display: grid;
  min-height: 160px;
}
.skeleton-fill {
  border-radius: var(--radius);
}
.skeleton-block,
.skeleton-line,
.skeleton-fill {
  background:
    linear-gradient(
      90deg,
      var(--surface-muted) 0%,
      var(--ground) 50%,
      var(--surface-muted) 100%) 0 0 / 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-block {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
}
.skeleton-lines {
  display: grid;
  gap: 10px;
}
.skeleton-line {
  height: 12px;
  border-radius: var(--radius-sm);
}
.skeleton-line:first-child {
  width: min(60%, 18rem);
  height: 14px;
}
.skeleton-line:nth-child(2) {
  width: min(40%, 12rem);
}
.skeleton-field .skeleton-line:first-child {
  width: 8rem;
}
.skeleton-input {
  height: var(--input-height);
  border-radius: var(--control-radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
@keyframes skeleton-in {
  to {
    opacity: 1;
  }
}
@keyframes skeleton-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    opacity: 1;
  }
  .skeleton-block,
  .skeleton-line,
  .skeleton-fill {
    animation: none;
  }
}
@media (forced-colors: active) {
  .skeleton-block,
  .skeleton-line,
  .skeleton-fill {
    border: 1px solid GrayText;
  }
}
.signin-card {
  max-width: 560px;
  padding: 28px;
  background: var(--surface);
  border-radius: var(--radius);
}
.signin-card h2 {
  margin: 0;
  font-size: var(--text-lg);
}
.signin-card p {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.signin-card .actions {
  margin-top: var(--space-6);
}
@media (max-width: 480px) {
  .signin-card {
    padding: 20px 16px;
  }
}
.owned-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.owned-list-head h2 {
  margin: 0;
  font-size: var(--text-xl);
}
.owned-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  container: owned / inline-size;
}
.owned-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "thumb main actions";
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
}
.owned-row:first-child {
  border-top: 0;
}
.owned-row:not(:has(> .owned-thumb)) {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main actions";
}
.owned-thumb {
  grid-area: thumb;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--muted);
}
.owned-thumb > :is(svg, img) {
  width: 100%;
  height: 100%;
}
.owned-thumb.is-large {
  width: 56px;
  height: 56px;
}
.owned-main {
  grid-area: main;
  min-width: 0;
}
.owned-title {
  display: block;
  margin: 0;
  max-width: 100%;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-snug);
  overflow-wrap: break-word;
}
.owned-row :is(button, a).text-link.owned-title {
  min-height: 0;
  padding-block: 2px;
}
.owned-meta {
  display: flex;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
  white-space: nowrap;
}
.owned-meta > * {
  flex: none;
}
.owned-url {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owned-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
@container owned (max-width: 34rem) {
  .owned-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "thumb main main" "thumb action menu";
    align-items: start;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
  }
  .owned-row:not(:has(> .owned-thumb)) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main main" "action menu";
  }
  .owned-actions {
    display: contents;
  }
  .owned-actions > .more-menu {
    grid-area: menu;
    justify-self: end;
    align-self: center;
    margin: 0 -10px 0 0;
  }
  .owned-actions > :not(.more-menu) {
    grid-area: action;
    justify-self: start;
  }
  .owned-meta {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .owned-url {
    order: 1;
    flex: 1 0 100%;
  }
}
@container owned (max-width: 20rem) {
  .owned-row {
    grid-template-areas: "thumb main main" "action action menu";
  }
}
.owned-list > .notice {
  margin-top: 0;
}
.more-menu {
  position: relative;
  display: inline-block;
}
.more-menu > summary {
  list-style: none;
}
.more-menu > summary::-webkit-details-marker {
  display: none;
}
.more-menu > summary.icon-button {
  color: var(--muted);
}
.more-menu > summary.icon-button:hover,
.more-menu[open] > summary.icon-button {
  color: var(--ink);
  background: var(--surface-muted);
}
.more-menu-list {
  position: absolute;
  z-index: var(--z-overlay);
  top: calc(100% + 4px);
  right: 0;
  display: grid;
  min-width: 13rem;
  max-width: min(20rem, calc(100vw - 2 * var(--page-gutter)));
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.more-menu[data-placement=top] > .more-menu-list {
  top: auto;
  bottom: calc(100% + 4px);
}
.more-menu[open]:not([data-placed]) > .more-menu-list {
  visibility: hidden;
}
.more-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--control-height);
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.4;
  text-align: start;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}
.more-menu-item > svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.more-menu-item:hover,
.more-menu-item:focus-visible {
  background: var(--surface-muted);
  color: var(--ink);
}
.more-menu-item:focus-visible {
  outline-offset: -2px;
}
.more-menu-item.danger {
  color: var(--error);
}
.more-menu-item.danger > svg {
  color: currentColor;
}
.more-menu-item.danger:hover {
  background: var(--error-ground);
  color: var(--error-hover);
}
.more-menu-sep {
  height: 1px;
  margin: 4px 8px;
  border: 0;
  background: var(--line);
}
.share-panel {
  overflow: hidden;
  margin: var(--space-6) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.share-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--success-ground);
}
.share-panel-head h3 {
  margin: 0;
  font-size: var(--text-md);
}
.share-panel-head .badge {
  background: var(--surface);
}
.share-panel-meta {
  color: var(--muted);
  font-size: var(--text-xs);
}
.share-panel-body {
  padding: var(--space-4) var(--space-5);
}
.share-panel-body > label {
  display: block;
  margin: 0 0 8px;
  font-size: var(--text-sm);
  font-weight: 600;
}
.share-panel-body > .actions {
  margin-top: var(--space-3);
}
.share-panel-qr {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--space-4);
  margin: var(--space-4) 0 0;
}
.share-panel-qr > :is(svg, img, .share-panel-qr-image) {
  grid-row: 1 / span 2;
  width: 96px;
  height: 96px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.share-panel-qr figcaption {
  align-self: end;
  color: var(--muted);
  font-size: var(--text-sm);
}
.share-panel-qr .text-button {
  align-self: start;
  justify-self: start;
}
.share-panel-danger {
  margin-block: var(--space-4) 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.share-panel-danger .button.danger-quiet {
  margin-inline-start: -16px;
}

/* src/styles/creator-workbench.css */
.workbench-heading {
  display: block;
  margin: 0 0 var(--space-6);
}
.workbench-heading h1 {
  max-width: 34ch;
}
.workbench-heading p {
  max-width: 68ch;
  margin-top: var(--space-2);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--muted);
}
.workbench-modes {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0 var(--space-4);
  margin: 0;
}
.workbench-modes > .client-form-gate {
  min-width: 0;
}
.workbench-modes .mode-switch {
  display: flex;
  gap: 2px;
  min-width: 0;
}
.workbench-modes .mode-switch > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 48px;
  margin-bottom: -1px;
  padding: 12px 20px 13px 18px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
}
.workbench-modes .mode-switch > button svg {
  width: 20px;
  height: 20px;
}
.workbench-modes .mode-switch > button:not([aria-pressed=true]):hover {
  color: var(--ink);
  background: var(--surface-muted);
}
.workbench-modes .mode-switch > button[aria-pressed=true] {
  color: var(--brand);
  background: var(--white);
  border-color: var(--line);
  box-shadow: inset 0 2px 0 var(--action);
}
.workbench-modes .mode-switch > button[aria-pressed=true] svg {
  color: var(--action);
}
@media (forced-colors: active) {
  .workbench-modes .mode-switch > button[aria-pressed=true] {
    border-color: Highlight;
    border-bottom: 0;
  }
}
.workbench-modes > #studio-browse {
  display: none;
  align-items: center;
  min-height: 44px;
  margin-bottom: 2px;
  font-size: var(--text-sm);
}
body:has(.studio-workspace[data-workbench-mode=print]) .workbench-modes > #studio-browse {
  display: inline-flex;
}
.workspace.studio-workspace {
  --creator-head: 52px;
  --creator-pad: var(--space-8);
  --qr-card: 360px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 36%, calc(var(--qr-card) + 2 * var(--creator-pad)));
  gap: 0;
  padding: 0;
  max-width: none;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  box-shadow: 0 1px 2px rgb(16 42 67 / 4%), 0 18px 40px -28px rgb(16 42 67 / 22%);
}
.workspace.studio-workspace::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  background: var(--surface-output);
  border-left: 1px solid var(--line);
  border-radius: 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0;
}
.studio-workspace > .studio-sidebar {
  grid-column: 1;
  grid-row: 1;
  padding: var(--creator-pad);
}
.studio-workspace > :is(#qr-output, #print-output) {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  position: sticky;
  top: var(--space-6);
  min-width: 0;
  padding: var(--creator-pad);
  background: transparent;
  border: 0;
  border-radius: 0;
}
.studio-workspace .editor-pane {
  padding: 0;
}
.studio-workspace .editor-pane .type-picker {
  margin-bottom: var(--space-6);
}
.studio-workspace .editor-pane .field {
  margin-bottom: var(--space-5);
}
.studio-workspace .editor-pane .field > label {
  margin-bottom: var(--space-2);
}
.studio-workspace .editor-pane .field-help {
  margin-top: 6px;
  line-height: var(--leading-snug);
}
.studio-workspace .editor-pane .field-error {
  margin-top: 6px;
}
.studio-workspace .editor-pane .payment-field-grid {
  gap: 0 var(--space-5);
  margin-bottom: 0;
}
@container editor (max-width: 34rem) {
  .studio-workspace .editor-pane .payment-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.studio-workspace .check span[aria-hidden=true] {
  color: var(--action);
}
.studio-workspace .editor-pane .field > label.remember-payee {
  margin-block: var(--space-2) 0;
}
.studio-workspace .editor-pane .advanced {
  margin: var(--space-1) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.studio-workspace .editor-pane .advanced > summary {
  min-height: 52px;
  margin: 0;
  padding-block: 12px;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
}
.studio-workspace .editor-pane .advanced[open] {
  padding-bottom: var(--space-2);
}
.studio-workspace .form-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: 0;
}
.studio-workspace .form-bottom > .primary {
  min-height: 48px;
  padding-inline: 20px;
}
.studio-workspace .form-bottom > .quiet {
  min-height: 48px;
  margin: 0;
  padding-inline: 16px;
  color: var(--muted);
  font-weight: 600;
}
.studio-workspace .form-bottom > .quiet:hover:not(:disabled) {
  color: var(--ink);
  background: var(--surface-muted);
}
#qr-output .output-top,
#print-output .studio-preview-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--creator-head);
  margin: 0 0 var(--space-6);
}
#print-output .studio-preview-heading {
  flex-wrap: wrap;
  justify-content: space-between;
}
#qr-output .output-top h2 {
  margin-right: auto;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}
#qr-output .output-top .draft-label {
  font-size: var(--text-xs);
}
.studio-workspace #qr-preview {
  display: grid;
  place-items: center;
  width: min(100%, var(--qr-card));
  max-width: none;
  min-height: 0;
  aspect-ratio: 1;
  margin: 0 auto;
  padding: var(--space-4);
  background: var(--white);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgb(16 42 67 / 6%), 0 10px 28px -12px rgb(16 42 67 / 22%);
  overflow: hidden;
}
.studio-workspace #qr-preview > svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}
.studio-workspace #qr-preview:has(> .qr-empty) {
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29' shape-rendering='crispEdges'%3E%3Cpath fill='%23102a43' fill-opacity='.11' fill-rule='evenodd' d='M2 2h7v7h-7zM3 3v5h5v-5zM4 4h3v3h-3zM20 2h7v7h-7zM21 3v5h5v-5zM22 4h3v3h-3zM2 20h7v7h-7zM3 21v5h5v-5zM4 22h3v3h-3zM18 18h5v5h-5zM19 19v3h3v-3z M20 20h1v1h-1z'/%3E%3Cpath fill='%23102a43' fill-opacity='.08' d='M2 10h1v1h-1zM2 11h1v1h-1zM2 13h1v1h-1zM2 16h1v1h-1zM2 18h1v1h-1zM3 11h1v1h-1zM3 12h1v1h-1zM3 15h1v1h-1zM3 16h1v1h-1zM4 13h1v1h-1zM4 15h1v1h-1zM4 16h1v1h-1zM4 17h1v1h-1zM4 18h1v1h-1zM5 11h1v1h-1zM5 16h1v1h-1zM5 17h1v1h-1zM5 18h1v1h-1zM6 12h1v1h-1zM6 15h1v1h-1zM6 18h1v1h-1zM7 14h1v1h-1zM7 16h1v1h-1zM8 10h1v1h-1zM8 12h1v1h-1zM8 14h1v1h-1zM8 16h1v1h-1zM8 18h1v1h-1zM9 10h1v1h-1zM9 12h1v1h-1zM9 17h1v1h-1zM10 8h1v1h-1zM10 10h1v1h-1zM10 15h1v1h-1zM10 18h1v1h-1zM10 20h1v1h-1zM10 21h1v1h-1zM10 22h1v1h-1zM10 24h1v1h-1zM10 25h1v1h-1zM11 3h1v1h-1zM11 10h1v1h-1zM11 15h1v1h-1zM11 16h1v1h-1zM11 17h1v1h-1zM11 18h1v1h-1zM11 21h1v1h-1zM11 22h1v1h-1zM12 6h1v1h-1zM12 8h1v1h-1zM12 14h1v1h-1zM12 16h1v1h-1zM12 17h1v1h-1zM12 18h1v1h-1zM12 19h1v1h-1zM12 21h1v1h-1zM12 22h1v1h-1zM12 23h1v1h-1zM12 24h1v1h-1zM12 26h1v1h-1zM13 4h1v1h-1zM13 5h1v1h-1zM13 9h1v1h-1zM13 14h1v1h-1zM13 15h1v1h-1zM13 17h1v1h-1zM13 19h1v1h-1zM13 20h1v1h-1zM13 23h1v1h-1zM13 25h1v1h-1zM14 5h1v1h-1zM14 7h1v1h-1zM14 8h1v1h-1zM14 12h1v1h-1zM14 13h1v1h-1zM14 20h1v1h-1zM14 23h1v1h-1zM14 24h1v1h-1zM14 25h1v1h-1zM14 26h1v1h-1zM15 10h1v1h-1zM15 11h1v1h-1zM15 12h1v1h-1zM15 13h1v1h-1zM15 20h1v1h-1zM15 26h1v1h-1zM16 3h1v1h-1zM16 8h1v1h-1zM16 11h1v1h-1zM16 12h1v1h-1zM16 13h1v1h-1zM16 16h1v1h-1zM16 22h1v1h-1zM16 23h1v1h-1zM17 6h1v1h-1zM17 7h1v1h-1zM17 9h1v1h-1zM17 10h1v1h-1zM17 12h1v1h-1zM17 14h1v1h-1zM17 25h1v1h-1zM18 2h1v1h-1zM18 3h1v1h-1zM18 5h1v1h-1zM18 8h1v1h-1zM18 10h1v1h-1zM18 14h1v1h-1zM18 16h1v1h-1zM18 17h1v1h-1zM20 11h1v1h-1zM20 15h1v1h-1zM20 16h1v1h-1zM20 23h1v1h-1zM20 24h1v1h-1zM20 25h1v1h-1zM21 12h1v1h-1zM21 15h1v1h-1zM21 23h1v1h-1zM22 12h1v1h-1zM22 15h1v1h-1zM22 16h1v1h-1zM22 17h1v1h-1zM22 24h1v1h-1zM23 10h1v1h-1zM23 11h1v1h-1zM23 14h1v1h-1zM23 18h1v1h-1zM23 19h1v1h-1zM23 20h1v1h-1zM23 22h1v1h-1zM23 23h1v1h-1zM24 10h1v1h-1zM24 11h1v1h-1zM24 15h1v1h-1zM24 16h1v1h-1zM24 19h1v1h-1zM24 23h1v1h-1zM24 25h1v1h-1zM25 11h1v1h-1zM25 14h1v1h-1zM25 15h1v1h-1zM25 17h1v1h-1zM25 18h1v1h-1zM25 19h1v1h-1zM25 20h1v1h-1zM25 21h1v1h-1zM25 22h1v1h-1zM25 23h1v1h-1zM25 25h1v1h-1zM26 10h1v1h-1zM26 12h1v1h-1zM26 13h1v1h-1zM26 14h1v1h-1zM26 17h1v1h-1zM26 20h1v1h-1z'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-clip: border-box;
}
.studio-workspace #qr-preview > .qr-empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.studio-workspace #qr-preview[data-state=pending] {
  animation: creator-card-pulse 1.1s ease-in-out infinite alternate;
}
@keyframes creator-card-pulse {
  to {
    background-color: var(--ground);
  }
}
@media (prefers-reduced-motion: reduce) {
  .studio-workspace #qr-preview[data-state=pending] {
    animation: none;
  }
}
#qr-output :is(.qr-hint, .validation-status) {
  width: min(100%, var(--qr-card));
  margin: var(--space-4) auto 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-align: center;
  text-wrap: balance;
}
#qr-output .qr-hint {
  color: var(--muted);
}
#qr-output:has(#qr-preview:is([data-state=ready], [data-state=pending])) .qr-hint,
#qr-output:has(.validation-status:not(:empty)) .qr-hint {
  display: none;
}
#qr-output .validation-status {
  display: block;
  min-height: 0;
}
#qr-output .validation-status:empty {
  display: none;
}
#qr-output .validation-status:is([data-status=ready], [data-status=error])::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-inline-end: 6px;
  vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask: center / 16px no-repeat var(--status-mark);
  mask: center / 16px no-repeat var(--status-mark);
}
#qr-output .validation-status[data-status=ready] {
  --status-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='m5.25 8.25 1.8 1.8 3.7-4.1'/%3E%3C/svg%3E");
}
#qr-output .validation-status[data-status=error] {
  --status-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.75v3.75M8 11h.01'/%3E%3C/svg%3E");
}
@media (forced-colors: active) {
  #qr-output .validation-status::before {
    display: none;
  }
}
.studio-workspace:not([data-created=true]) #qr-output :is(.export-actions, .output-settings, .payment-link-actions, .payload-detail),
#qr-output #qr-preview:not([data-state=ready]):not([data-state=pending]) ~ :is(.export-actions, .output-settings, .payment-link-actions, .payload-detail) {
  display: none;
}
#qr-output .export-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
  width: min(100%, var(--qr-card));
  margin: var(--space-5) auto 0;
}
#qr-output .export-actions > .button,
#qr-output .export-more > summary {
  min-height: 48px;
  padding: 10px 16px;
  white-space: nowrap;
}
#qr-output .export-actions > .button.primary {
  flex: 1 1 7rem;
  font-size: var(--text-md);
}
#qr-output .export-actions .button svg {
  width: 18px;
  height: 18px;
}
#qr-output .export-actions .button.secondary:not(:disabled) svg {
  color: var(--action);
}
#qr-output #qr-preview[data-state=pending] ~ .export-actions .button:disabled {
  border-color: var(--input-line);
  opacity: 0.55;
  cursor: progress;
}
#qr-output #qr-preview[data-state=pending] ~ .export-actions .button.primary:disabled {
  background: var(--action);
  color: var(--white);
}
#qr-output #qr-preview[data-state=pending] ~ .export-actions .button.secondary:disabled {
  background: var(--white);
  color: var(--ink);
}
#qr-output .export-more {
  display: contents;
}
#qr-output .export-more > summary {
  flex: 0 0 auto;
  list-style: none;
}
#qr-output .export-more > summary::-webkit-details-marker {
  display: none;
}
#qr-output .export-more-chevron {
  color: var(--muted);
  transition: transform var(--motion-base) var(--ease-out);
}
#qr-output .export-more[open] .export-more-chevron {
  transform: rotate(180deg);
}
#qr-output .export-more::details-content {
  flex: 1 1 100%;
}
#qr-output .export-more-list {
  display: grid;
  flex: 1 1 100%;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-1);
  padding: var(--space-1);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
#qr-output .export-more-list > .button {
  justify-content: flex-start;
  gap: var(--space-3);
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  white-space: normal;
}
#qr-output .export-more-list > .button:hover:not(:disabled) {
  background: var(--ground);
}
#qr-output .export-more-list > .button svg {
  color: var(--action);
}
@media (prefers-reduced-motion: reduce) {
  #qr-output .export-more-chevron {
    transition: none;
  }
}
#qr-output .save-status:not([hidden]) {
  width: min(100%, var(--qr-card));
  margin: var(--space-2) auto 0;
}
#qr-output > :is(.payload-summary, .payment-check, #normalization-notes, .payment-link-actions, .output-settings, .payload-detail, .export-error) {
  width: min(100%, var(--qr-card));
  margin-inline: auto;
}
#qr-output .payload-summary:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-6);
  margin-bottom: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
#qr-output .payload-summary > div {
  display: block;
  min-width: 0;
  padding-top: 0;
}
#qr-output .payload-summary dt {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--muted);
}
#qr-output .payload-summary dd {
  margin-top: 2px;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
#qr-output .payment-check {
  margin-top: var(--space-4);
  margin-bottom: 0;
  padding: 14px 16px 4px;
  border-color: var(--line);
  border-radius: var(--radius);
}
#qr-output .payment-check p {
  line-height: var(--leading-body);
}
#qr-output #normalization-notes:not([hidden]) {
  margin-top: var(--space-4);
  margin-bottom: 0;
}
#qr-output .payment-link-actions {
  display: grid;
  margin-top: var(--space-6);
  margin-bottom: 0;
  padding: 0;
  border: 0;
}
#qr-output .payment-link-actions > #share-payment-page,
#qr-output .payment-link-actions > p {
  grid-area: 1 / 1;
}
#qr-output .payment-link-actions > #share-payment-page {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 32px 12px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
  text-align: left;
}
#qr-output .payment-link-actions > #share-payment-page::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background-color: currentColor;
  -webkit-mask: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 5 5 5-5 5'/%3E%3C/svg%3E");
  mask: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 5 5 5-5 5'/%3E%3C/svg%3E");
}
#qr-output .payment-link-actions > #share-payment-page:hover:not(:disabled) {
  color: var(--action);
  background: transparent;
}
#qr-output .payment-link-actions > #share-payment-page:focus-visible {
  outline-offset: -2px;
}
#qr-output .payment-link-actions > #share-payment-page:disabled {
  opacity: 0.55;
  cursor: progress;
}
#qr-output .payment-link-actions > p {
  align-self: end;
  margin: 0;
  padding: calc(13px + var(--text-sm) * 1.45 + 2px) 32px 12px 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--muted);
  pointer-events: none;
}
#qr-output :is(.output-settings, .payload-detail),
#qr-output .payment-link-actions .payment-apps {
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
}
#qr-output .output-settings {
  margin-top: var(--space-6);
}
#qr-output .payment-link-actions:not([hidden]) + .output-settings {
  margin-top: 0;
}
#qr-output .payload-detail {
  margin-top: 0;
  border-bottom: 1px solid var(--line);
}
#qr-output :is(.output-settings, .payload-detail, .payment-apps) > summary {
  min-height: 48px;
  margin: 0;
  padding-block: 12px;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
}
#qr-output :is(.output-settings, .payload-detail, .payment-apps)[open] {
  padding-bottom: var(--space-4);
}
#qr-output .output-settings .output-options {
  margin: var(--space-1) 0 0;
}
#qr-output .payload-detail pre {
  margin-top: 0;
  border: 1px solid var(--line);
}
@media (min-width: 821px) {
  .studio-workspace[data-workbench-mode=qr] > .studio-sidebar[data-fits=true] {
    position: sticky;
    top: var(--space-6);
    align-self: start;
  }
}
.workbench-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-4);
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
}
.workbench-more > span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
}
.workbench-more > span + span::before {
  content: "·";
  margin-inline-end: var(--space-4);
  color: var(--muted);
}
.workbench-more a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}
.workbench-more a:hover > span {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.workbench-more a svg {
  width: 16px;
  height: 16px;
  transition: transform var(--motion-base) var(--ease-out);
}
.workbench-more a:hover svg {
  transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
  .workbench-more a svg {
    transition: none;
  }
  .workbench-more a:hover svg {
    transform: none;
  }
}
@media (max-width: 640px) {
  .workbench-more {
    flex-direction: column;
    align-items: flex-start;
  }
  .workbench-more > span + span::before {
    content: none;
  }
}
.studio-workspace .studio-preview-stage {
  background: var(--white);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgb(16 42 67 / 6%), 0 10px 28px -12px rgb(16 42 67 / 22%);
}
.studio-workspace:is([data-card-state=empty], [data-card-state=error], :not([data-card-state])) #print-output :is(.card-downloads, #card-export-help, #save-qr-print) {
  display: none;
}
.studio-workspace:is([data-card-state=empty], :not([data-card-state])) #print-output #create-card {
  display: none;
}
.studio-workspace .editor-pane #card-owner-field {
  margin-top: var(--space-5);
}
.studio-workspace[data-card-state=pending] #print-output .card-downloads .button:disabled {
  opacity: 0.55;
  cursor: progress;
}
.studio-workspace[data-card-state=pending] #print-output .card-downloads .button.primary:disabled {
  background: var(--action);
  color: var(--white);
}
.studio-workspace[data-card-state=pending] #print-output .card-downloads .button.secondary:disabled {
  background: var(--white);
  color: var(--ink);
  border-color: var(--input-line);
}
@media (max-width: 1024px) {
  .workspace.studio-workspace {
    --creator-pad: var(--space-6);
  }
}
@media (max-width: 820px) {
  .workbench-heading {
    max-width: none;
    margin: 0 0 var(--space-5);
  }
  .workspace.studio-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .workspace.studio-workspace::before {
    grid-column: 1;
    grid-row: 2;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
  }
  .studio-workspace > :is(#qr-output, #print-output) {
    grid-column: 1;
    grid-row: 2;
    position: static;
  }
  #qr-output .output-top,
  #print-output .studio-preview-heading {
    min-height: 0;
    margin-bottom: var(--space-4);
  }
  #qr-output .output-top {
    width: min(100%, var(--qr-card));
    margin-inline: auto;
  }
  .studio-workspace #qr-output:has(#qr-preview:not([data-state=ready]):not([data-state=pending])) {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3);
    padding-block: var(--space-4);
  }
  #qr-output:has(#qr-preview:not([data-state=ready]):not([data-state=pending])) > * {
    grid-column: 1 / -1;
  }
  #qr-output:has(#qr-preview:not([data-state=ready]):not([data-state=pending])) > .output-top {
    display: none;
  }
  #qr-output:has(#qr-preview:not([data-state=ready]):not([data-state=pending])) > #qr-preview {
    grid-column: 1;
    width: 40px;
    padding: 4px;
    border-radius: var(--radius);
  }
  #qr-output:has(#qr-preview:not([data-state=ready]):not([data-state=pending])) > #qr-preview {
    background-size: 100%;
  }
  #qr-output:has(#qr-preview:not([data-state=ready]):not([data-state=pending])) > :is(.qr-hint, .validation-status) {
    grid-column: 2;
    width: auto;
    margin: 0;
    text-align: left;
    text-wrap: wrap;
    justify-content: flex-start;
  }
}
@media (max-width: 480px) {
  .workspace.studio-workspace {
    --creator-pad: var(--space-4);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  body:has(.studio-workspace[data-workbench-mode=qr]) #tool-intro {
    display: none;
  }
  .workbench-heading {
    margin-bottom: var(--space-4);
  }
  .workbench-modes > .client-form-gate {
    flex: 1 1 100%;
  }
  .workbench-modes .mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .workbench-modes .mode-switch > button {
    gap: 6px;
    padding: 10px 8px 11px;
  }
  .workbench-modes .mode-switch > button svg {
    width: 18px;
    height: 18px;
  }
  body:has(.studio-workspace[data-workbench-mode=print]) .workbench-modes > #studio-browse {
    display: none;
  }
  .studio-workspace > .studio-sidebar {
    padding: var(--space-5) var(--space-4) var(--space-6);
  }
  .studio-workspace > :is(#qr-output, #print-output) {
    padding: var(--space-5) var(--space-4) var(--space-6);
  }
  .studio-workspace .form-bottom {
    row-gap: var(--space-4);
  }
  .studio-workspace .form-bottom > .primary {
    flex-basis: 100%;
  }
  .studio-workspace .form-bottom > .quiet {
    margin-inline: auto;
  }
}
@media (max-width: 380px) {
  .workbench-modes .mode-switch > button svg {
    display: none;
  }
}

/* src/styles/studio-showcase.css */
.home-studio-band {
  --home-studio-scene: 0.834;
  --home-studio-foot: 0.076;
  --home-studio-span: 0.895;
  --home-studio-center: 0.003;
  --home-studio-clip-keep: 0.01;
  --home-studio-shadow-width: 0.84;
  --home-studio-shadow-height: 0.115;
  --home-studio-shadow-drop: 0.035;
  --home-studio-glow-width: 0.63;
  --home-studio-glow-height: 0.42;
  --home-studio-glow-drop: 0.33;
  --home-studio-tile: 360px;
  --home-studio-tile-pad: var(--space-8);
  --home-studio-column: clamp( 320px, 36%, calc(var(--home-studio-tile) + 2 * var(--home-studio-tile-pad)) );
  --home-studio-inset: var(--space-8);
  --home-studio-edge: 1px;
  --home-studio-rise: var(--space-12);
  --home-studio-floor: var(--space-1);
  --home-studio-qr-max: 14rem;
  --home-studio-qr-transfer: 10.5rem;
  --home-studio-card-frame: 4rem;
  --home-studio-qr: clamp( 7.5rem, var(--home-studio-authored-art) * var(--home-studio-scene) + var(--home-studio-floor) - var(--home-studio-card-frame), var(--home-studio-qr-max) );
  --home-studio-over: calc(var(--z-raised) + 1);
  --home-studio-art-scale: 1;
  --home-studio-authored-art: calc(min(var(--home-studio-tile), 29.5vw) / var(--home-studio-span));
  --home-studio-art: calc(var(--home-studio-authored-art) * var(--home-studio-art-scale));
  --home-studio-art-balance: calc((var(--home-studio-authored-art) - var(--home-studio-art)) * var(--home-studio-scene) / 2);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--home-studio-column);
  margin-block-start: calc(var(--space-8) + var(--home-studio-rise));
  border: var(--home-studio-edge) solid transparent;
  border-radius: var(--radius-lg);
  color: var(--white);
  background-color: var(--brand);
  background-image:
    linear-gradient(
      165deg,
      var(--brand-hover) 0%,
      var(--brand) 58%);
  background-origin: border-box;
  box-shadow: inset 0 1px 0 var(--on-brand-hairline), var(--shadow-card);
}
@supports (width: 1cqi) {
  .home-studio-band {
    --home-studio-authored-art: calc( min(var(--home-studio-tile), 100cqi - 2 * var(--home-studio-tile-pad)) / var(--home-studio-span) );
  }
}
.home-studio-band[data-showcase=zodiac-ngo] {
  --home-studio-scene: 0.703;
  --home-studio-foot: 0.111;
  --home-studio-span: 0.896;
  --home-studio-center: 0.003;
}
.home-studio-band[data-showcase=lucky-cat] {
  --home-studio-scene: 0.88;
  --home-studio-foot: 0.044;
  --home-studio-span: 0.702;
  --home-studio-center: 0.007;
}
@media (min-width: 821px) {
  .home-studio-band[data-showcase=lucky-cat] {
    --home-studio-art-scale: 0.85;
  }
}
.home-studio-band[data-showcase=fortune] {
  --home-studio-scene: 0.89;
  --home-studio-foot: 0.04;
  --home-studio-span: 0.764;
  --home-studio-center: 0.011;
}
.home-studio-band[data-showcase=bank-logo] {
  --home-studio-scene: 0.498;
  --home-studio-foot: 0.212;
  --home-studio-span: 0.822;
  --home-studio-center: 0.003;
}
.home-studio-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-self: center;
  max-width: 42rem;
  padding: var(--space-12) var(--space-8) var(--space-12) var(--home-studio-inset);
}
.home-studio-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--on-brand-accent);
}
.home-studio-eyebrow svg {
  width: 1.25em;
  height: 1.25em;
}
.home-studio-title {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--white);
  text-wrap: pretty;
}
.home-studio-text {
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--on-brand-muted);
  text-wrap: balance;
}
.home-studio-band .home-studio-entry {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  margin-block-start: var(--space-3);
  padding: var(--space-2) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--brand);
  background: var(--white);
  text-decoration: none;
}
.home-studio-band .home-studio-entry svg {
  width: 1.125em;
  height: 1.125em;
}
.home-studio-band .home-studio-entry::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--home-studio-edge));
  z-index: var(--z-raised);
  border-radius: var(--radius-lg);
}
.home-studio-band .home-studio-entry:focus-visible {
  outline-color: var(--focus-on-brand);
}
.home-studio-art {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: clip;
}
.home-studio-faces {
  display: grid;
  grid-template-areas: "face";
  flex: none;
}
.home-studio-stage {
  grid-area: face;
  align-self: start;
  position: relative;
  height: calc(var(--home-studio-authored-art) * var(--home-studio-scene) + var(--home-studio-floor) - var(--home-studio-rise) - var(--home-studio-edge));
  background:
    radial-gradient(
      calc(var(--home-studio-art) * var(--home-studio-glow-width)) calc(var(--home-studio-art) * var(--home-studio-glow-height)) at 50% calc(var(--home-studio-art) * var(--home-studio-glow-drop) + var(--home-studio-art-balance) - var(--home-studio-rise) - var(--home-studio-edge)),
      var(--on-brand-glow),
      transparent 72%);
}
.home-studio-stage img,
.home-studio-live {
  position: absolute;
  inset-inline-start: calc(50% - var(--home-studio-art) * (0.5 + var(--home-studio-center)));
  bottom: calc(var(--home-studio-floor) + var(--home-studio-art-balance) - var(--home-studio-art) * var(--home-studio-foot));
  width: var(--home-studio-art);
  max-width: none;
  height: var(--home-studio-art);
  z-index: var(--home-studio-over);
  cursor: pointer;
  clip-path: inset(calc(var(--home-studio-art) * (1 - var(--home-studio-scene) - var(--home-studio-foot) - var(--home-studio-clip-keep))) calc(var(--home-studio-art) * ((1 - var(--home-studio-span)) / 2 - var(--home-studio-center) - var(--home-studio-clip-keep))) calc(var(--home-studio-art) * (var(--home-studio-foot) - var(--home-studio-clip-keep))) calc(var(--home-studio-art) * ((1 - var(--home-studio-span)) / 2 + var(--home-studio-center) - var(--home-studio-clip-keep))));
}
.home-studio-live {
  pointer-events: none;
  opacity: 0;
}
.home-studio-live canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.home-studio-art[data-demo-runtime=ready] .home-studio-stage img {
  opacity: 0;
}
.home-studio-art[data-demo-runtime=ready] .home-studio-live {
  opacity: 1;
}
.home-studio-stage::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset-inline-start: calc(50% - var(--home-studio-art) * var(--home-studio-shadow-width) / 2);
  bottom: calc(var(--home-studio-floor) + var(--home-studio-art-balance) - var(--home-studio-art) * var(--home-studio-shadow-drop));
  width: calc(var(--home-studio-art) * var(--home-studio-shadow-width));
  height: calc(var(--home-studio-art) * var(--home-studio-shadow-height));
  background:
    radial-gradient(
      closest-side,
      var(--on-brand-shade),
      transparent);
}
.home-studio-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-block-start: auto;
  padding: var(--space-2) var(--home-studio-tile-pad) var(--space-4);
}
.home-studio-caption {
  flex: 1 1 auto;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  text-align: end;
  color: var(--on-brand-subtle);
}
.home-studio-flip {
  position: relative;
  z-index: var(--home-studio-over);
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--white);
  background: transparent;
  cursor: pointer;
}
.home-studio-flip:disabled {
  visibility: hidden;
}
.home-studio-flip[aria-busy=true] {
  cursor: progress;
}
.home-studio-flip[aria-busy=true] > svg {
  opacity: 0;
}
.home-studio-flip[aria-busy=true]::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--space-3);
  top: calc(50% - 0.45rem);
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--radius-pill);
  animation: home-studio-busy calc(var(--motion-base) * 4) linear infinite;
}
@keyframes home-studio-busy {
  to {
    transform: rotate(360deg);
  }
}
.home-studio-flip svg {
  width: 1.125em;
  height: 1.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.home-studio-flip[aria-pressed=true] {
  border-color: var(--white);
  color: var(--brand);
  background: var(--white);
}
.home-studio-flip:focus-visible {
  outline-color: var(--focus-on-brand);
}
.home-studio-reset {
  position: relative;
  z-index: var(--home-studio-over);
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--on-brand-muted);
  background: transparent;
  cursor: pointer;
}
.home-studio-reset:disabled {
  visibility: hidden;
}
.home-studio-reset:focus-visible {
  outline-color: var(--focus-on-brand);
}
.home-studio-reset svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-studio-art[data-demo-orbit=ready] .home-studio-stage img {
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-drag: none;
}
.home-studio-art[data-demo-dragging=true] .home-studio-stage img {
  cursor: grabbing;
}
@media (hover: hover) and (pointer: fine) {
  .home-studio-reset:hover {
    color: var(--white);
    background: var(--on-brand-hairline);
  }
}
@media (pointer: coarse) {
  .home-studio-reset {
    width: var(--control-height);
    height: var(--control-height);
  }
}
.home-studio-demo {
  grid-area: face;
  position: relative;
  z-index: var(--home-studio-over);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-width: 0;
  margin: calc(-1 * (var(--home-studio-rise) + var(--home-studio-edge))) var(--home-studio-tile-pad) 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 18px 40px -24px var(--on-brand-shade);
  cursor: pointer;
}
.home-studio-qr {
  flex: none;
  width: min(100%, var(--home-studio-qr));
  aspect-ratio: 1;
  forced-color-adjust: none;
}
.home-studio-demo[data-demo-kind=transfer] .home-studio-qr {
  width: min(100%, max(var(--home-studio-qr), var(--home-studio-qr-transfer)));
}
.home-studio-qr svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: none;
}
.home-studio-demo figcaption {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 100%;
  text-align: center;
}
.home-studio-demo-payee {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
.home-studio-demo-check {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--muted);
  text-wrap: balance;
}
.home-studio-art:not([data-demo-frame])[data-demo-state=scene] .home-studio-demo,
.home-studio-art[data-demo-frame=poster] .home-studio-demo,
.home-studio-art[data-demo-frame=scene] .home-studio-demo,
.home-studio-art[data-demo-frame=transition] .home-studio-demo,
.home-studio-art[data-demo-frame=qr] .home-studio-stage {
  visibility: hidden;
  opacity: 0;
}
@media (hover: hover) {
  .home-studio-band .home-studio-entry:hover {
    background: var(--selection);
  }
  .home-studio-flip:hover {
    background: var(--on-brand-hover);
  }
  .home-studio-flip[aria-pressed=true]:hover {
    background: var(--selection);
  }
}
@media (pointer: coarse) {
  .home-studio-flip {
    min-height: var(--control-height);
  }
}
.home-studio-band .home-studio-entry:active {
  background: var(--on-brand-muted);
  transition: none;
}
@media (prefers-reduced-motion: no-preference) {
  .home-studio-band .home-studio-entry svg,
  .home-studio-stage img {
    transition: transform var(--motion-base) var(--ease-out);
  }
  .home-studio-band .home-studio-entry:active > * {
    translate: 0 1px;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home-studio-band .home-studio-entry:hover svg {
    transform: translateX(2px);
  }
  .home-studio-art:not([data-demo-runtime=ready]) .home-studio-stage img:hover,
  .home-studio-art:not([data-demo-runtime=ready]):has(.home-studio-flip:hover) .home-studio-stage img {
    transform: translateY(calc(-1 * var(--space-1)));
  }
}
@media (max-width: 1024px) {
  .home-studio-band {
    --home-studio-tile-pad: var(--space-6);
    --home-studio-inset: var(--space-6);
  }
}
@media (max-width: 820px) {
  .home-studio-band {
    --home-studio-tile-pad: var(--space-4);
    --home-studio-column: clamp(296px, 46%, 360px);
    --home-studio-rise: var(--space-10);
    --home-studio-qr-max: 11rem;
  }
  .home-studio-copy {
    padding-block: var(--space-8);
  }
}
@media (max-width: 640px) {
  .home-studio-band {
    --home-studio-authored-art: 236px;
    grid-template-columns: minmax(0, 1fr);
    background-image:
      linear-gradient(
        175deg,
        var(--brand-hover) 0%,
        var(--brand) 46%);
  }
  .home-studio-art {
    order: -1;
  }
  .home-studio-band {
    --home-studio-qr-max: 9.5rem;
    --home-studio-card-frame: 3.25rem;
  }
  .home-studio-foot {
    justify-content: center;
    padding-inline: var(--home-studio-inset);
  }
  .home-studio-caption {
    flex-grow: 0;
    text-align: center;
  }
  .home-studio-demo {
    justify-self: center;
    width: min(100% - 2 * var(--home-studio-inset), 20rem);
    margin-inline: 0;
    padding: var(--space-3);
    gap: var(--space-2);
  }
  .home-studio-copy {
    align-self: stretch;
    max-width: none;
    padding: var(--space-6) var(--home-studio-inset);
  }
  .home-studio-title {
    font-size: var(--text-xl);
  }
}
@media (max-width: 480px) {
  .home-studio-band {
    --home-studio-inset: var(--space-4);
  }
  .home-studio-band .home-studio-entry {
    align-self: stretch;
  }
}
@media (forced-colors: active) {
  .home-studio-eyebrow,
  .home-studio-text {
    color: CanvasText;
  }
  .home-studio-band {
    border-color: CanvasText;
  }
  .home-studio-demo,
  .home-studio-flip {
    border-color: CanvasText;
  }
  .home-studio-flip[aria-pressed=true] {
    border-color: Highlight;
    color: HighlightText;
    background: Highlight;
  }
  .home-studio-stage img {
    filter: drop-shadow(0 0 0.5px CanvasText) drop-shadow(0 0 0.5px CanvasText);
  }
}
body:has(.studio-workspace[data-workbench-mode=print]) .home-studio-band {
  display: none;
}
@media print {
  .home-studio-band {
    display: none;
  }
}

/* src/styles/preview-sync.css */
.live-preview {
  position: sticky;
  top: var(--space-6);
  align-self: start;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--preview-column-h, auto);
}
.preview-head {
  container: preview-head / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-4);
}
.preview-head > h2 {
  margin: 0;
  font-size: var(--text-lg);
}
:is(.preview-head > h2, .preview-sheet-head > h2):focus {
  outline: none;
}
.preview-head > .preview-caption {
  grid-column: 1 / -1;
}
.preview-head-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}
.preview-width-choice {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.preview-width-choice select {
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: var(--control-height);
  height: max(var(--control-height), calc(1.55em + 18px));
  padding: 8px 30px 8px 10px;
  font-size: var(--text-sm);
}
@container preview-head (width < 28em) {
  .preview-head-controls {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}
.live-preview[data-bio-view=card] .preview-width-choice {
  display: none;
}
@media (max-width: 820px) {
  .preview-width-choice {
    display: none;
  }
}
.preview-caption {
  --cap-lines: 2;
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--cap-lines);
  overflow: hidden;
  block-size: calc(var(--cap-lines) * var(--leading-snug) * var(--text-sm));
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}
@container preview-head (width < 28em) {
  .preview-caption {
    --cap-lines: 3;
  }
}
@container preview-head (width < 18em) {
  .preview-caption {
    --cap-lines: 4;
  }
}
@container preview-head (width < 15em) {
  .preview-caption {
    --cap-lines: 5;
  }
}
.preview-caption-main {
  color: var(--ink);
}
.preview-caption-lead {
  font-weight: 600;
}
.preview-caption-sep {
  margin-inline: 0.4em;
  color: var(--muted);
}
.preview-caption-link,
.preview-caption-field {
  position: relative;
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  color: var(--action);
  font: inherit;
  font-weight: 600;
  text-decoration: underline 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.preview-caption-link {
  white-space: nowrap;
}
.preview-caption-link::after,
.preview-caption-field::after {
  content: "";
  position: absolute;
  inset: -14px -4px;
}
.preview-caption-link svg {
  width: 14px;
  height: 14px;
  margin-inline-start: 2px;
  vertical-align: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
:is(.preview-caption, .preview-sheet-caption)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  background: var(--action);
  opacity: 0;
  pointer-events: none;
}
:is(.preview-caption, .preview-sheet-caption)[data-pulse]::before {
  animation: preview-pulse 600ms var(--ease-out);
}
:is(.preview-caption, .preview-sheet-caption)[data-pulse=static]::before {
  animation: none;
  opacity: 0.1;
}
.preview-stage {
  flex: 1 1 auto;
  display: grid;
  justify-items: center;
  align-items: start;
  min-height: 0;
  margin-top: var(--space-3);
  padding: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-output);
}
.preview-screen {
  width: calc(var(--preview-screen-w) * var(--k, 1));
  height: var(--vis, 100%);
}
.preview-viewport {
  width: var(--preview-screen-w);
  height: calc(var(--vis, 100%) / var(--k, 1));
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border-radius: var(--preview-screen-radius);
  background: var(--ground);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
  transform: scale(var(--k, 1));
  transform-origin: 0 0;
}
.preview-viewport::-webkit-scrollbar {
  display: none;
}
.preview-viewport:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}
@media (max-height: 799px) {
  .preview-stage {
    margin-top: var(--space-2);
    padding: var(--space-3);
  }
}
@media (max-height: 520px) {
  .live-preview {
    position: static;
    height: auto;
  }
}
.preview-page {
  position: relative;
  container: public-frame / inline-size;
  width: var(--preview-screen-w);
  min-height: 100%;
  background: var(--ground);
  color: var(--ink);
  transform-origin: 0 0;
}
.preview-content {
  min-height: 100%;
}
.preview-content[inert] {
  -webkit-touch-callout: none;
  user-select: none;
}
.preview-page[data-state=example] svg {
  pointer-events: none;
}
.preview-content[data-entering] {
  animation: preview-fade-in var(--motion-fast) var(--ease-out);
}
.preview-page-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding-inline: var(--page-gutter);
  background: var(--brand);
  color: var(--white);
}
.preview-page-main {
  padding: var(--space-6) var(--page-gutter) 40px;
}
@supports (container-type: inline-size) {
  @container public-frame (max-width: 1024px) {
    .preview-page > * {
      --page-gutter: 24px;
    }
  }
  @container public-frame (max-width: 820px) {
    .preview-page > * {
      --page-gutter: 20px;
    }
  }
  @container public-frame (max-width: 480px) {
    .preview-page > * {
      --page-gutter: 16px;
    }
  }
}
.preview-page [data-slot] {
  transition: opacity var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.preview-page [data-fill=placeholder] {
  opacity: 0.46;
}
.preview-page [data-fill=placeholder] button {
  visibility: hidden;
}
.preview-page:is([data-state=draft], [data-state=illustration]) :is(.donation-primary, .donation-image-actions, .donation-qr-status) {
  display: none;
}
.preview-ring {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  transform: translate(calc(var(--ring-left, 0px) - 7px), calc(var(--ring-top, 0px) - 7px));
  width: calc(var(--ring-width, 0px) + 14px);
  height: calc(var(--ring-height, 0px) + 14px);
  border: 2px solid var(--action);
  border-radius: 6px;
  box-shadow: 0 0 0 9px rgb(23 92 211 / 10%);
  pointer-events: none;
}
.preview-ring[data-tone=error] {
  border-color: var(--error);
  box-shadow: 0 0 0 9px rgb(180 35 24 / 10%);
}
.preview-ring[hidden] {
  display: none;
}
.qr-skeleton {
  container-type: inline-size;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--control-radius);
  background: var(--white) var(--qr-skeleton-image) center / 86% no-repeat;
  box-shadow: inset 0 0 0 1px var(--line);
}
.qr-skeleton[data-tone=illustration] {
  opacity: 0.75;
}
.qr-skeleton-plate {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 94%);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
@container (max-width: 71px) {
  .qr-skeleton-plate {
    display: none;
  }
}
.preview-bar {
  display: inline-block;
  max-width: 100%;
  height: 0.7em;
  border-radius: var(--radius-pill);
  background: rgb(16 42 67 / 9%);
  vertical-align: middle;
}
.preview-intro,
.preview-lens {
  margin: calc(-1 * var(--flow-pad, 28px)) calc(-1 * var(--flow-pad, 28px)) var(--space-4);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}
.preview-intro {
  position: relative;
  container: preview-intro / inline-size;
  padding: var(--space-3) var(--space-3) var(--space-4);
  background: var(--surface-output);
}
.preview-intro > .preview-caption {
  --cap-lines: 3;
  margin-bottom: var(--space-3);
}
.preview-intro-body {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}
.preview-mini {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: 14px;
  background: var(--ground);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-1);
}
:is(.preview-mini, .preview-lens-window) > :is(.preview-page, .preview-copy) {
  position: absolute;
  top: 0;
  left: 0;
}
.preview-copy {
  transform-origin: 0 0;
}
.preview-copy > :is(img, svg) {
  display: block;
  width: 100%;
  height: auto;
}
.preview-intro-side {
  display: flex;
  flex: 0 1 auto;
  justify-content: center;
  min-width: 44px;
}
.preview-intro-open {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  max-width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--action);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  overflow-wrap: break-word;
  cursor: pointer;
}
.preview-intro-open svg {
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-1);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.preview-intro-open::after {
  content: "";
  position: absolute;
  inset: 0;
}
.preview-intro-open:focus-visible {
  outline: none;
}
.preview-intro:has(.preview-intro-open:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: -2px;
}
.preview-lens {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding: var(--space-2);
  background: var(--surface);
}
.preview-lens.is-stuck {
  border-radius: 0;
  box-shadow: var(--shadow-1);
}
.preview-lens-window {
  position: relative;
  height: 112px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ground);
  cursor: pointer;
}
.preview-lens-window::after,
.preview-lens-fade {
  content: "";
  position: absolute;
  pointer-events: none;
}
.preview-lens-window::after {
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
}
.preview-lens-fade {
  inset: auto 0 0;
  height: 44px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--ground) 94%, transparent));
}
.preview-lens-window > :is(.preview-page, .preview-copy) {
  transition: transform var(--motion-base) var(--ease-out);
}
.preview-lens.is-keyboard {
  position: static;
}
.preview-lens-open {
  position: absolute;
  right: calc(var(--space-2) + 6px);
  bottom: calc(var(--space-2) + 6px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--control-radius);
  background: var(--white);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-1);
  cursor: pointer;
}
.preview-lens-open::before {
  content: "";
  position: absolute;
  inset: -4px;
}
:is(.preview-lens-open, .preview-sheet-close) svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.preview-lens-label {
  display: none;
}
.preview-intro[hidden] {
  display: none;
}
@media (min-width: 821px) {
  .preview-intro,
  .preview-lens {
    display: none;
  }
}
@media (max-width: 820px) {
  .live-preview {
    display: none;
  }
}
@media (min-width: 641px) {
  .preview-lens-window {
    height: 152px;
  }
}
:is(.preview-intro, .preview-lens).is-short {
  position: static;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}
.preview-intro.is-short > .preview-caption {
  --cap-lines: 1;
  flex: 1;
  min-width: 0;
  margin: 0;
}
:is(.preview-intro, .preview-lens).is-short :is(.preview-mini, .preview-lens-window, .preview-lens-fade),
.preview-intro.is-short .preview-caption :is(br, .preview-caption-more) {
  display: none;
}
.preview-intro.is-short .preview-intro-body {
  flex: none;
}
.preview-lens.is-short .preview-lens-label {
  display: block;
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 600;
}
.preview-lens.is-short .preview-lens-open {
  position: relative;
  inset: auto;
}
dialog.preview-sheet {
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: var(--ground);
  box-shadow: none;
}
.preview-sheet-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 56px;
  padding-inline: var(--space-2) var(--space-4);
  background: var(--surface);
}
.preview-sheet-head > h2 {
  margin: 0;
  font-size: var(--text-lg);
}
.preview-sheet-caption {
  position: relative;
  text-wrap: pretty;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.preview-sheet-body > :is(.preview-page, .preview-copy) {
  width: 100%;
}
[data-preview-form] :is(input, select, textarea):is(:autofill, :-webkit-autofill) {
  animation: preview-autofill 1ms !important;
}
@keyframes preview-autofill {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
@keyframes preview-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes preview-pulse {
  30% {
    opacity: 0.1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .preview-content[data-entering],
  :is(.preview-caption, .preview-sheet-caption)[data-pulse]::before {
    animation: none;
  }
  .preview-page [data-slot],
  .preview-lens-window > :is(.preview-page, .preview-copy) {
    transition: none;
  }
}
@media (forced-colors: active) {
  .preview-ring {
    border-color: Highlight;
    box-shadow: none;
  }
  .qr-skeleton {
    border: 1px solid CanvasText;
  }
  .preview-bar {
    forced-color-adjust: none;
    background: transparent;
    border: 1px solid GrayText;
  }
  .preview-viewport:not(:focus-visible),
  :is(.preview-mini, .preview-lens-window) {
    outline: 1px solid CanvasText;
  }
}

/* src/styles.css */