/* Shared SDK capsule. Host color-scheme controls light/dark rendering.
   Four inset highlights carry the Amethyst reflective edge across every finish. */
button.latch-capsule {
  appearance: none;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  width: var(--latch-capsule-width, 200px);
  max-width: 100%;
  min-width: 48px;
  height: var(--latch-capsule-height, 48px);
  min-height: 48px;
  margin: 0;
  padding: 9px 8px;
  border: 1px solid color-mix(in srgb, CanvasText 24%, Canvas);
  border-radius: 999px;
  background: linear-gradient(
    155deg,
    color-mix(in srgb, CanvasText 5%, Canvas),
    Canvas 65%
  );
  color: CanvasText;
  box-shadow:
    inset 0 1px 1px #fffffff0,
    inset 1px 0 1px #ffffff80,
    inset -1px 0 1px #ffffff45,
    inset 0 -1px 1px #ffffff70,
    0 2px 3px #0000000a,
    0 7px 16px #0000000d;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}
button.latch-capsule img {
  display: block;
  width: 28px;
  height: 28px;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
button.latch-capsule:not(:disabled):hover {
  border-color: color-mix(in srgb, CanvasText 55%, Canvas);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 1px #fffffff0,
    inset 1px 0 1px #ffffff80,
    inset -1px 0 1px #ffffff45,
    inset 0 -1px 1px #ffffff70,
    0 4px 8px #00000010,
    0 10px 22px #00000015;
}
button.latch-capsule:not(:disabled):active {
  transform: translateY(1px) scale(0.98);
  box-shadow: inset 0 1px 1px #ffffffcc, inset 1px 0 1px #ffffff66, inset -1px 0 1px #ffffff45, inset 0 -1px 1px #ffffff70, inset 0 2px 5px #00000013;
}
button.latch-capsule:focus-visible {
  outline: 3px solid CanvasText;
  outline-offset: 4px;
}
button.latch-capsule:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}
button.latch-capsule[aria-busy="true"] {
  cursor: progress;
  opacity: 0.75;
}
@media (prefers-reduced-motion: reduce) {
  button.latch-capsule {
    transition: none;
  }
  button.latch-capsule:not(:disabled):hover,
  button.latch-capsule:not(:disabled):active {
    transform: none;
  }
}
@media (forced-colors: active) {
  button.latch-capsule {
    border: 2px solid ButtonText;
    background: ButtonFace;
    box-shadow: none;
  }
}

/* Fixed light/dark pairings keep the icon legible on either host theme. */
button.latch-capsule[data-appearance] {
  background: #f4f4f6;
  border-color: #85858b;
  color: #111;
}
button.latch-capsule[data-appearance] img {
  filter: brightness(0);
}
button.latch-capsule[data-appearance="solid-black"] {
  background: #101114;
  border-color: #676a72;
  color: #fff;
}
button.latch-capsule[data-appearance="solid-graphite"] {
  background: #42464e;
  border-color: #777d88;
  color: #fff;
}
button.latch-capsule[data-appearance="solid-pearl"] {
  background: #e1e3e8;
  border-color: #777d88;
  color: #111;
}
button.latch-capsule[data-appearance="solid-white"] {
  background: #fff;
  border-color: #85858b;
  color: #111;
}
button.latch-capsule[data-appearance="glass-smoke"] {
  background: #282a30;
  border-color: #8e949f;
  color: #fff;
}
button.latch-capsule:is(
    [data-appearance="solid-black"],
    [data-appearance="solid-graphite"],
    [data-appearance="glass-smoke"]
  )
  img {
  filter: brightness(0) invert(1);
}
/* Translucent fills let the actual host surface show through the material.
   Opaque definitions above remain the fallback without backdrop-filter. */
button.latch-capsule[data-appearance="glass-amethyst"] { background:#8854e8; border-color:#bfa0f1; color:#fff; }
button.latch-capsule[data-appearance="glass-amethyst"] img { filter:brightness(0) invert(1); }
@supports (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  button.latch-capsule[data-appearance^="glass-"] {
    -webkit-backdrop-filter: blur(12px) saturate(165%);
    backdrop-filter: blur(12px) saturate(165%);
    border-color: #ffffff70;
    background-clip: padding-box;
    box-shadow:
      inset 0 1px 1px #fffffff0,
      inset 1px 0 1px #ffffff80,
      inset -1px 0 1px #ffffff45,
      inset 0 -1px 1px #ffffff70,
      0 2px 5px #10182812,
      0 8px 20px #10182824;
  }
  button.latch-capsule[data-appearance="glass-frost"] {
    background:
      radial-gradient(ellipse at 22% 0%, #ffffff8c, #ffffff00 65%),
      linear-gradient(160deg, #ffffff66, #eef5ff70 48%, #ffffff52);
  }
  button.latch-capsule[data-appearance="glass-smoke"] {
    background:
      radial-gradient(ellipse at 22% 0%, #ffffff38, #ffffff00 65%),
      linear-gradient(160deg, #303946a6, #17202b8c 48%, #0d152080);
    border-color: #ffffff50;
  }
  button.latch-capsule[data-appearance="glass-amethyst"] {
    background:radial-gradient(ellipse at 22% 0%,#f5e4ff80,#ffffff00 65%),linear-gradient(155deg,#a574f880,#8854e88c 50%,#5925b880);
    border-color:#e2cfff9c;
  }
  button.latch-capsule[data-appearance^="glass-"]:not(:disabled):hover {
    border-color: #ffffffb3;
    box-shadow:
      inset 0 1px 1px #fffffff0,
      inset 1px 0 1px #ffffff99,
      inset -1px 0 1px #ffffff66,
      inset 0 -1px 1px #ffffff90,
      0 4px 8px #10182818,
      0 12px 26px #1018282e;
  }
  button.latch-capsule[data-appearance^="glass-"]:not(:disabled):active {
    box-shadow: inset 0 1px 1px #ffffffcc, inset 1px 0 1px #ffffff66, inset -1px 0 1px #ffffff45, inset 0 -1px 1px #ffffff70, inset 0 1px 3px #10182838;
  }
}
button.latch-capsule[data-appearance]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: inset 0 1px 1px #fffffff0, inset 1px 0 1px #ffffff80, inset -1px 0 1px #ffffff45, inset 0 -1px 1px #ffffff70, 0 0 0 6px #111;
}
@media (prefers-reduced-transparency: reduce) {
  button.latch-capsule[data-appearance^="glass-"] {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #f4f4f6;
  }
  button.latch-capsule[data-appearance="glass-smoke"] {
    background: #282a30;
  }
}
@media (prefers-reduced-transparency: reduce) { button.latch-capsule[data-appearance="glass-amethyst"] { background:#8854e8; } }
@media (forced-colors: active) {
  button.latch-capsule[data-appearance] {
    background: ButtonFace;
    color: ButtonText;
    border: 2px solid ButtonText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  button.latch-capsule[data-appearance] img {
    filter: none;
  }
  button.latch-capsule[data-appearance]:focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none;
  }
}

button.latch-capsule[data-size="sm"] {
  --latch-capsule-width: 200px;
  --latch-capsule-height: 48px;
}
button.latch-capsule[data-size="md"] {
  --latch-capsule-width: 224px;
  --latch-capsule-height: 48px;
}
button.latch-capsule[data-size="lg"] {
  --latch-capsule-width: 248px;
  --latch-capsule-height: 56px;
}
button.latch-capsule[data-size="xl"] {
  --latch-capsule-width: 272px;
  --latch-capsule-height: 64px;
}

/* Allow a mounted capsule to fit grid/flex columns without shrinking its touch target. */
.latch-capsule-root {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  text-align: center;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.latch-capsule-root > [role="status"] {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

button.latch-capsule[data-appearance="solid-camo"] { background:radial-gradient(ellipse at 12% 20%,#252c23 0 14%,transparent 15%),radial-gradient(ellipse at 75% 80%,#c1b28a 0 22%,transparent 23%),radial-gradient(ellipse at 48% 35%,#354530 0 26%,transparent 27%),radial-gradient(ellipse at 90% 12%,#252c23 0 19%,transparent 20%),radial-gradient(ellipse at 18% 85%,#354530 0 25%,transparent 26%),linear-gradient(#78805a,#78805a); border-color:#a4aa8b; color:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; }
button.latch-capsule[data-appearance="solid-camo"] img { filter:brightness(0) invert(1); }

/* The wordmark changes presentation without changing any capsule dimensions. */
button.latch-capsule { gap: 4px; }
button.latch-capsule .latch-wordmark { font: 500 13px/1 system-ui, sans-serif; white-space: nowrap; color: inherit; }
button.latch-capsule img[hidden], button.latch-capsule .latch-wordmark[hidden] { display: none; }
button.latch-capsule { container-type: inline-size; container-name: latch-capsule; }
@container latch-capsule (max-width: 64px) {
  button.latch-capsule .latch-wordmark { display: none; }
  button.latch-capsule img[hidden] + .latch-wordmark:not([hidden]) { display: block; }
}

/* Hybrid rules are attribute-scoped so older runtimes can coexist on rollback. */
button.latch-capsule[data-hybrid="true"] {
  width:var(--latch-capsule-width,200px); min-width:min(160px,100%); height:var(--latch-capsule-height,48px); padding:0 12px;
  touch-action:pan-y; user-select:none; overflow:hidden;
  justify-content:center; --slide:0px; --progress:0;
}
button.latch-capsule[data-hybrid="true"] img {
  position:absolute; left:8px; width:36px; height:36px; padding:4px;
  box-sizing:border-box; transform:translateX(var(--slide)); z-index:2;
  transition:transform 280ms cubic-bezier(.2,.8,.2,1);
}
button.latch-capsule[data-hybrid="true"] .latch-wordmark {
  opacity:calc(1 - var(--progress)); transition:opacity 120ms;
  font-size:17px; letter-spacing:-.5px;
}
/* Closed until authentication completes. Opening a gateway never unlocks it. */
button.latch-capsule[data-hybrid="true"]::before,
button.latch-capsule[data-hybrid="true"]::after {
  content:''; position:absolute; color:inherit; opacity:1; z-index:3; pointer-events:none;
}
button.latch-capsule[data-hybrid="true"]::after {
  right:16px; width:12px; height:10px; top:calc(50% - 1px);
  border:1.8px solid currentColor; border-radius:3px;
}
button.latch-capsule[data-hybrid="true"]::before {
  right:18.5px; width:7px; height:8px; top:calc(50% - 10px);
  border:1.8px solid currentColor; border-bottom:0; border-radius:8px 8px 0 0;
  transition:transform 180ms ease;
}
button.latch-capsule[data-hybrid="true"][data-unlocked]::before {
  border-right-color:transparent; transform:translateX(-2px) rotate(-18deg);
}
button.latch-capsule[data-hybrid="true"][aria-busy="true"]::before { display:none; }
button.latch-capsule[data-hybrid="true"][aria-busy="true"]::after {
  width:12px; height:12px; top:calc(50% - 8px); border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent;
  animation:latch-auth-pending 900ms linear infinite;
}
@keyframes latch-auth-pending { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) {
  button.latch-capsule[data-hybrid="true"]::before { transition:none; }
  button.latch-capsule[data-hybrid="true"][aria-busy="true"]::after { animation:none; }
}
button.latch-capsule[data-hybrid="true"][data-dragging] img { transition:none; }
button.latch-capsule[data-hybrid="true"][data-dragging] { cursor:grabbing; transform:none; }
button.latch-capsule[data-hybrid="true"][data-ready] { outline:2px solid currentColor; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) {
  button.latch-capsule[data-hybrid="true"] img,
  button.latch-capsule[data-hybrid="true"] .latch-wordmark { transition:none; }
}

@media (forced-colors:active) {
  button.latch-capsule[data-hybrid="true"]::before,
  button.latch-capsule[data-hybrid="true"]::after { color:ButtonText; }
}

/* Wallet connections are a separate, user-initiated action; never a sign-in result. */
.latch-wallet{font:14px/1.5 system-ui,-apple-system,sans-serif;color:#172438;max-width:420px;width:100%;margin:12px auto}.latch-wallet button,.latch-wallet select{font:inherit}.latch-wallet [hidden]{display:none!important}.latch-wallet-toggle{display:block;margin:0 auto;min-height:40px;border:1px solid #8496b4;border-radius:20px;padding:8px 18px;background:#f6f8fd;color:#233656;cursor:pointer}.latch-wallet-panel{margin-top:12px;padding:20px;border:1px solid #c5cfdf;border-radius:16px;background:#f7f9fc;color:#172438;box-shadow:0 14px 38px #101b3020}.latch-wallet-panel h3{font-size:20px;margin:0 0 10px}.latch-wallet-panel p{font-size:12px;line-height:1.65}.latch-wallet-panel label{display:grid;gap:6px;font-size:12px}.latch-wallet-panel select{min-height:40px;background:#fff;color:#172438;border:1px solid #b5c2d5;border-radius:8px;padding:8px;width:100%}.latch-wallet-panel button{min-height:44px;border:1px solid #c8d2e0;background:#fff;color:#172438;padding:10px 12px;border-radius:9px;cursor:pointer;margin-top:8px}.latch-wallet-options{margin:12px 0}.latch-wallet-options button{display:flex;align-items:center;gap:10px;width:100%;text-align:left}.latch-wallet-options small{margin-left:auto;font-size:10px;color:#526178}.latch-wallet-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#e1e8f9;color:#30477c;font-weight:700}.latch-wallet button:disabled{opacity:.5;cursor:not-allowed}.latch-wallet button:focus-visible,.latch-wallet select:focus-visible,.latch-wallet a:focus-visible,.latch-wallet summary:focus-visible{outline:3px solid #5279d4;outline-offset:3px}.latch-wallet-address{overflow-wrap:anywhere;white-space:pre-wrap;padding:12px;background:#e4ebf8;border-radius:8px}.latch-wallet-status:empty{display:none}.latch-wallet-panel>small{display:block;font-size:10px;color:#526178;margin-top:12px}.latch-wallet-panel details{font-size:12px;margin:14px 0}.latch-wallet-panel details a{display:block;padding:8px;color:#304e92}.latch-wallet-panel summary{cursor:pointer}.product>.latch-wallet{padding:0 16px 16px;box-sizing:border-box}.hero-stage .latch-wallet{color:#172438}.hero-stage .latch-wallet-panel p{color:#526178}
.latch-l7c{box-sizing:border-box;padding:12px 16px;border:1px solid #b2a66d;border-radius:16px;background:#fcfaf2;text-align:center}.latch-l7c[hidden]{display:none!important}.latch-l7c .latch-wallet-toggle{background:#211d12;color:#fff7d7;border-color:#a08837}.latch-l7c p{font-size:12px;color:#514b38;line-height:1.6;margin:10px 0 0}

/* Compact containers keep the accessible name and icon; never squeeze the wordmark. */
@container latch-capsule (max-width: 120px) {
  button.latch-capsule[data-hybrid="true"] .latch-wordmark { display:none; }
}

.latch-wallet img.latch-wallet-mark{object-fit:contain;flex:0 0 28px;background:transparent;border-radius:0;filter:none;padding:0}

/* One scoped account panel; wallet actions never become a second Capsule. */
.latch-capsule-root {max-width:100%}
button.latch-capsule[data-appearance="solid-graphite"] {
  background:linear-gradient(160deg,#444d5b,#242a34);border-color:#727b8b;
  box-shadow:0 2px 3px #11182718,0 10px 22px #1118271c,inset 0 1px 0 #ffffff48;
}
button.latch-capsule[aria-expanded="true"] {outline:3px solid #a9b7cd;outline-offset:4px}
.latch-account-panel {box-sizing:border-box;display:block;width:440px;max-width:100%;margin:20px auto 0;padding:24px;border:1px solid #d7dee8;border-radius:24px;background:linear-gradient(160deg,#fff,#fafbfe);color:#202631;color-scheme:light;box-shadow:0 2px 4px #18284404,0 24px 64px #18284412;font:14px/1.5 system-ui,-apple-system,sans-serif;text-align:left;animation:latch-panel-enter 180ms ease-out}
.latch-account-panel [hidden],.latch-account-panel[hidden] {display:none!important}
.latch-account-panel * {box-sizing:border-box}
.latch-account-panel .latch-panel-heading,.latch-account-panel .latch-panel-brand {display:flex;align-items:center;gap:10px}
.latch-account-panel .latch-panel-heading {justify-content:space-between}
.latch-account-panel .latch-panel-brand img {width:24px;height:24px;filter:brightness(0);padding:0;background:none;border-radius:0}
.latch-account-panel h2 {font:650 18px/1.3 system-ui;margin:0;letter-spacing:-.4px;color:#202631}
.latch-account-panel button {font:inherit;cursor:pointer}
.latch-account-panel button:focus-visible,.latch-account-panel select:focus-visible {outline:3px solid #5267ed;outline-offset:3px}
.latch-account-panel .latch-panel-close {border:1px solid #e3e7ee;background:transparent;color:#6f7b8b;border-radius:50%;width:44px;height:44px;padding:0;font-size:22px}
.latch-account-panel .latch-panel-copy {margin:20px 0 14px;font-size:13px;line-height:1.65;color:#657186;overflow-wrap:anywhere}
.latch-account-panel .latch-panel-primary {display:block;width:100%;min-height:48px;padding:10px 16px;border:1px solid #273241;border-radius:11px;background:linear-gradient(#3c4554,#252d39);color:white;font-weight:600;box-shadow:inset 0 1px #ffffff20,0 3px 7px #1b273615}
.latch-account-panel .latch-panel-primary:hover {background:#414d60}
.latch-account-panel button:disabled {opacity:.5;cursor:not-allowed}
.latch-account-panel .latch-panel-footer {font:10px/1.6 system-ui;color:#737f90;text-align:center;border-top:1px solid #e6eaf0;padding-top:16px;margin:18px 0 0;letter-spacing:.2px}
.latch-account-panel .latch-wallet-embedded {margin:24px 0 0;padding-top:20px;border-top:1px solid #e3e8ef;max-width:100%}
.latch-account-panel .latch-wallet-embedded .latch-wallet-panel {margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.latch-account-panel .latch-wallet-embedded h3 {font:600 14px/1.5 system-ui;color:#202631;margin-bottom:12px}
.latch-account-panel .latch-wallet-embedded select {min-height:44px;background:#f4f6fa;border-color:#e0e6ef;font-size:12px;color:#536277}
.latch-account-panel .latch-wallet-options button {border:1px solid #e2e7ef;background:#fff;border-radius:12px;min-height:56px;padding:12px 14px;margin:9px 0;transition:background 140ms,border-color 140ms}
.latch-account-panel .latch-wallet-options button:hover:not(:disabled) {background:#f4f7fc;border-color:#b5c3d9}
.latch-account-panel .latch-wallet-options span {font-size:13px;font-weight:550}
.latch-account-panel .latch-wallet-options small {font-size:11px;color:#687b95}
.latch-account-panel .latch-l7c {margin-top:24px}
.latch-account-panel .latch-l7c .latch-wallet-toggle {border-radius:10px;min-height:48px}
.latch-l7c .latch-wallet-toggle {width:100%;margin:8px 0 0}
.latch-l7c .latch-wallet-toggle:first-child {margin-top:0}
@keyframes latch-panel-enter {from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(max-width:380px){.latch-account-panel{padding:18px}}
@media(prefers-reduced-motion:reduce){.latch-account-panel{animation:none}.latch-account-panel .latch-wallet-options button{transition:none}}
@media(forced-colors:active){.latch-account-panel{background:Canvas;color:CanvasText;border-color:CanvasText}.latch-account-panel button{border:1px solid ButtonText}.latch-account-panel .latch-panel-primary{background:ButtonFace;color:ButtonText}}
.latch-wallet-connected {display:flex;align-items:center;gap:12px;padding:12px;background:#eef3f9;border:1px solid #dbe4ee;border-radius:12px;margin:12px 0}
.latch-wallet-connected .latch-wallet-address {padding:0;background:none;border-radius:0;margin:0;min-width:0;font-size:12px}