.sai-wallet-demo{margin:0;overflow:hidden;border:1px solid light-dark(#e5dbcf,#443b32);border-radius:20px;background:light-dark(#fffdfa,#22211e);color:light-dark(#282722,#eee9e2);font:14px/1.65 var(--sai-language-font,Inter),system-ui,sans-serif}.sai-wallet-demo *{box-sizing:border-box}.sai-wallet-demo [hidden]{display:none!important}.sai-wallet-demo-cover{display:grid;grid-template-columns:1fr 1.1fr;min-height:385px}.sai-wallet-demo-preview{display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;gap:13px;padding:36px;background:radial-gradient(ellipse at center,light-dark(#ecf1e3,#333b28),light-dark(#f4f5ef,#242720));font-size:clamp(16px,2vw,25px);font-weight:600;letter-spacing:-.04em}.sai-wallet-demo-preview>span:first-child{display:grid;place-items:center;width:58px;height:58px;background:light-dark(#d7e8bd,#485c36);color:light-dark(#45662c,#d7edbb);border-radius:15px;font-size:37px}.sai-wallet-demo-preview small{flex-basis:100%;text-align:center;font-size:11px;letter-spacing:0;color:light-dark(#6d775f,#b7c3a7);font-weight:400}.sai-wallet-demo-intro{padding:clamp(26px,4vw,54px)}.sai-wallet-demo-intro h3{font-size:clamp(25px,3vw,37px)!important;line-height:1.15!important;letter-spacing:-.04em!important;margin:12px 0 18px!important}.sai-wallet-demo-intro>p:not(.sai-wallet-eyebrow){max-width:420px;color:light-dark(#726b60,#c0b8ab);font-size:13px}.sai-wallet-demo-intro button{margin-top:12px}.sai-wallet-demo figcaption{padding:14px 22px;display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;align-items:center;border-top:1px solid light-dark(#e5dbcf,#443b32);font-size:11px;color:light-dark(#776b5f,#c0b8ab)}.sai-wallet-demo figcaption a{color:light-dark(#a23e0d,#ffb07a);font-weight:600;min-height:30px;display:inline-flex;align-items:center;gap:8px}.sai-wallet-demo iframe{display:block;width:100%;height:min(860px,calc(100svh - 145px));min-height:560px;border:0}.sai-wallet-demo noscript p{padding:20px}.sai-wallet-demo :is(button,a):focus-visible{outline:3px solid #c4652a;outline-offset:4px}.sai-wallet-consumer .sai-wallet-hero{display:block;padding-block:35px 50px}.sai-wallet-consumer .sai-wallet-hero-copy{max-width:800px}.sai-wallet-consumer .sai-wallet-hero h1{max-width:900px}.sai-wallet-consumer .sai-wallet-demo-section{padding-block:12px 70px;scroll-margin-top:110px}.sai-wallet-consumer .sai-wallet-demo-section>p{max-width:670px;color:var(--wallet-muted);font-size:14px;margin:0 0 24px}.sai-wallet-consumer .sai-wallet-hero .sai-wallet-lead{max-width:650px}.sai-wallet-demo-instructions{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.sai-wallet-demo-instructions p{font-size:14px;color:var(--wallet-muted)}
@media(max-width:700px){.sai-wallet-demo-cover{display:block}.sai-wallet-demo-preview{padding:24px}.sai-wallet-demo-preview>span:first-child{width:35px;height:35px;font-size:24px;border-radius:9px}.sai-wallet-demo-preview small{flex-basis:auto;margin-inline-start:6px}.sai-wallet-demo-intro{padding:27px 23px}.sai-wallet-demo figcaption{padding:12px 16px}.sai-wallet-demo iframe{height:min(900px,calc(100svh - 145px))}.sai-wallet-demo-instructions{grid-template-columns:1fr;gap:20px}}

.sai-wallet-demo [data-demo-start]{display:none}.sai-wallet-demo.is-ready [data-demo-start]{display:inline-flex}.sai-wallet-demo [data-demo-status]{padding:12px 22px;color:light-dark(#93401b,#ffc39a);font-size:12px}

.sai-wallet-demo{scroll-margin-top:105px}

/* A compact launch card beside the hero; the product runs in a homepage-style dialog. */
.sai-wallet-modal-demo-v1 .sai-wallet-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding-block: 30px 72px;
}
.sai-wallet-modal-demo-v1 .sai-wallet-hero-copy { padding-top: 0; min-width: 0; }
.sai-wallet-modal-demo-v1 .sai-wallet-hero h1 { font-size: clamp(44px, 5vw, 70px); }
.sai-wallet-hero-demo { min-width: 0; scroll-margin-top: 120px; }
.sai-wallet-demo--modal { box-shadow: 0 22px 70px light-dark(#8051280c, #0002); }
.sai-wallet-demo--modal .sai-wallet-demo-cover { display: block; min-height: 0; }
.sai-wallet-demo--modal .sai-wallet-demo-preview {
  position: relative;
  justify-content: flex-start;
  align-content: center;
  gap: 10px;
  padding: 22px 28px;
  font-size: 17px;
  letter-spacing: -.025em;
  border-bottom: 1px solid light-dark(#dfe4d5, #3e4437);
}
.sai-wallet-demo--modal .sai-wallet-demo-preview > span:first-child { width: 38px; height: 38px; border-radius: 10px; font-size: 26px; }
.sai-wallet-demo--modal .sai-wallet-demo-preview small { flex-basis: auto; margin-inline-start: auto; padding: 3px 8px; border: 1px solid light-dark(#cfd9c4, #4f5c44); border-radius: 5px; font-size: 10px; }
.sai-wallet-demo--modal .sai-wallet-demo-intro { padding: clamp(24px, 3vw, 38px); }
.sai-wallet-demo--modal .sai-wallet-demo-intro h3 { font-size: clamp(26px, 2.6vw, 34px) !important; }
.sai-wallet-demo--modal .sai-wallet-demo-intro > p:last-child { display: none; }
.sai-wallet-demo--modal figcaption > span { display: none; }
.sai-wallet-demo--modal figcaption { justify-content: center; }
.sai-wallet-demo-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 24px;
  border: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  background: transparent;
  color: light-dark(#282722, #eee9e2);
  font: 14px/1.5 var(--sai-language-font,Inter), system-ui, sans-serif;
}
.sai-wallet-demo-dialog::backdrop {
  background: light-dark(#e2ebf5ef, #1c1c1bef);
  backdrop-filter: blur(3px) saturate(.55);
  -webkit-backdrop-filter: blur(3px) saturate(.55);
}
.sai-wallet-demo-dialog[open] { display: grid; place-items: center; }
.sai-wallet-demo-surface {
  display: flex;
  flex-direction: column;
  width: min(1280px, 100%);
  height: min(1000px, calc(100dvh - 48px));
  min-height: 0;
  overflow: hidden;
  border: 1px solid light-dark(#e5dbcf, #443b32);
  border-radius: 24px;
  background: light-dark(#fffdfa, #22211e);
  box-shadow: 0 44px 120px light-dark(#111f3340, #0006);
  animation: sai-wallet-dialog-in 240ms cubic-bezier(.16, 1, .3, 1) both;
}
.sai-wallet-demo-dialog-heading {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 22px;
  border-bottom: 1px solid light-dark(#e5dbcf, #443b32);
}
.sai-wallet-demo-dialog-heading > div { min-width: 0; }
.sai-wallet-demo-dialog .sai-wallet-demo-dialog-heading h2 {
  margin: 0;
  color: inherit;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -.025em;
}
.sai-wallet-demo-dialog-heading p { margin: 4px 0 0; color: light-dark(#726b60, #c0b8ab); font-size: 11px; }
.sai-wallet-demo-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid light-dark(#e5dbcf, #443b32);
  border-radius: 10px;
  color: inherit;
  background: light-dark(#faf4ed, #29251f);
  font: 600 12px/1.4 var(--sai-language-font,Inter), system-ui, sans-serif;
  cursor: pointer;
}
.sai-wallet-demo-close > span:last-child { font-size: 24px; font-weight: 400; line-height: 1; }
.sai-wallet-demo-close:hover { color: light-dark(#a23e0d, #ffb07a); }
.sai-wallet-demo-dialog .sai-wallet-demo-stage { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.sai-wallet-demo-dialog iframe { height: max(640px, calc(100dvh - 192px)); min-height: 0; }
.sai-wallet-demo-dialog-footer {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 10px 22px;
  border-top: 1px solid light-dark(#e5dbcf, #443b32);
  color: light-dark(#726b60, #c0b8ab);
  font-size: 11px;
}
.sai-wallet-demo-dialog-footer a { display: inline-flex; align-items: center; min-height: 30px; color: light-dark(#a23e0d, #ffb07a); font-weight: 600; }
.sai-wallet-demo-dialog-footer button { padding: 8px 12px; border: 1px solid currentColor; border-radius: 6px; color: inherit; background: transparent; cursor: pointer; }
@keyframes sai-wallet-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .sai-wallet-modal-demo-v1 .sai-wallet-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sai-wallet-modal-demo-v1 .sai-wallet-hero-copy { max-width: 650px; }
  .sai-wallet-hero-demo { width: 100%; max-width: 600px; }
}
@media (max-width: 600px), (max-height: 600px) {
  .sai-wallet-demo-dialog { padding: 8px; }
  .sai-wallet-demo-surface { height: calc(100dvh - 16px); border-radius: 16px; }
  .sai-wallet-demo-dialog-heading { padding: 10px 12px; gap: 12px; }
  .sai-wallet-demo-dialog .sai-wallet-demo-dialog-heading h2 { font-size: 14px; }
  .sai-wallet-demo-dialog-heading p { font-size: 10px; }
  .sai-wallet-demo-close { padding: 7px 10px; }
  .sai-wallet-demo-dialog-footer { padding: 6px 12px; gap: 0 12px; font-size: 10px; }
  .sai-wallet-demo-dialog iframe { height: max(640px, calc(100dvh - 160px)); }
  .sai-wallet-demo--modal .sai-wallet-demo-preview { padding: 18px 22px; }
}
@media (prefers-reduced-motion: reduce) { .sai-wallet-demo-surface { animation: none; } }

.sai-wallet-demo-start-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2a1b1012; font-size: 10px; animation: wallet-demo-start-pulse 2.8s ease-out 3; }
.sai-wallet-demo-intro [data-demo-start] { gap: 12px; }
.sai-wallet-demo-intro [data-demo-start]:is(:hover,:focus-visible) .sai-wallet-demo-start-icon { animation: none; }
@keyframes wallet-demo-start-pulse { 0%,100% { box-shadow: 0 0 0 0 #2a1b1025; } 65% { box-shadow: 0 0 0 7px #2a1b1000; } }
@media(prefers-reduced-motion:reduce){.sai-wallet-demo-start-icon{animation:none}}

/* A single centered launch point; the native player stays in its existing dialog. */
.sai-wallet-centered-hero-v1.sai-wallet-consumer .sai-wallet-hero {
  display: block;
  position: relative;
  isolation: isolate;
  padding-block: clamp(36px, 5vw, 68px) clamp(56px, 7vw, 92px);
  text-align: center;
}
.sai-wallet-centered-hero-v1 .sai-wallet-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -12% 8% 0;
  background: radial-gradient(ellipse at 50% 48%, light-dark(#ffd7b42b, #b866251c), transparent 65%);
  pointer-events: none;
}
.sai-wallet-centered-hero-v1.sai-wallet-consumer .sai-wallet-hero-copy { width: 100%; max-width: 960px; margin-inline: auto; padding: 0; }
.sai-wallet-centered-hero-v1.sai-wallet-consumer .sai-wallet-hero h1 { max-width: none; font-size: clamp(42px, 5.6vw, 82px); line-height: 1.08; text-wrap: balance; }
.sai-wallet-centered-hero-v1.sai-wallet-consumer .sai-wallet-hero .sai-wallet-lead { max-width: 640px; margin-inline: auto; text-wrap: pretty; }
.sai-wallet-centered-hero-v1 .sai-wallet-actions { flex-direction: column; justify-content: center; gap: 14px; margin-block: 34px 18px; }
.sai-wallet-centered-hero-v1 .sai-wallet-hero-demo,
.sai-wallet-demo.sai-wallet-demo--hero,
.sai-wallet-demo--hero .sai-wallet-demo-cover { display: contents; }
.sai-wallet-centered-hero-v1 .sai-wallet-hero .sai-wallet-note { margin: 5px auto; max-width: 620px; }

@property --wallet-demo-orbit { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.sai-wallet-demo--hero .sai-wallet-demo-launch[data-demo-start] {
  display: inline-flex;
  position: relative;
  isolation: isolate;
  min-height: 58px;
  max-width: 100%;
  gap: 18px;
  padding: 17px 26px;
  border: 1px solid light-dark(#d8945d, #b47c4e);
  border-radius: 14px;
  background: light-dark(#fff3e6, #30261e);
  color: light-dark(#793300, #ffe1c3) !important;
  box-shadow: 0 8px 24px light-dark(#c8742614, #0003), 0 0 22px #f7a15b22;
  font-size: 14px;
  line-height: 1.5;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.sai-wallet-demo-launch::before,
.sai-wallet-demo-launch::after {
  content: '';
  position: absolute;
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--wallet-demo-orbit), transparent 0turn, transparent .48turn, #e68039 .66turn, #ffc08a .78turn, #fff0ce .84turn, #e68039 .9turn, transparent 1turn);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: wallet-demo-border-orbit 5s linear infinite;
  pointer-events: none;
}
.sai-wallet-demo-launch::after { inset: -5px; padding: 5px; z-index: -1; filter: blur(5px); opacity: .55; }
.sai-wallet-demo--hero .sai-wallet-demo-launch:hover { filter: none; background: light-dark(#ffead5, #3b2c20); box-shadow: 0 10px 30px #e68a3026, 0 0 28px #f7a15b3b; }
.sai-wallet-demo--hero .sai-wallet-demo-launch:focus-visible { outline: 3px solid var(--wallet-accent); outline-offset: 6px; }
.sai-wallet-demo-launch > :is(span, svg) { position: relative; z-index: 1; }
body:has(.sai-wallet-demo-dialog[open]) .sai-wallet-demo-launch::before,
body:has(.sai-wallet-demo-dialog[open]) .sai-wallet-demo-launch::after { animation-play-state: paused; }
@keyframes wallet-demo-border-orbit { to { --wallet-demo-orbit: 360deg; } }
@media(max-width:540px) {
  .sai-wallet-centered-hero-v1 .sai-wallet-actions { flex-direction: column; gap: 15px; margin-block: 28px 18px; }
  .sai-wallet-centered-hero-v1.sai-wallet-consumer .sai-wallet-hero h1 { font-size: clamp(40px, 8.4vw, 48px); }
  .sai-wallet-centered-hero-v1.sai-wallet-consumer .sai-wallet-hero .sai-wallet-lead { font-size: 15px; line-height: 1.8; }
  .sai-wallet-demo--hero .sai-wallet-demo-launch[data-demo-start] { padding-inline: 22px; }
  html:lang(ta) .sai-wallet-centered-hero-v1.sai-wallet-consumer .sai-wallet-hero h1 { font-size: clamp(30px, 8.8vw, 40px); line-height: 1.2; overflow-wrap: normal; }
}
@media(prefers-reduced-motion:reduce) {
  .sai-wallet-demo-launch::before,.sai-wallet-demo-launch::after { animation: none; }
  .sai-wallet-demo--hero .sai-wallet-demo-launch[data-demo-start] { transition: none; }
}
@media(forced-colors:active) {
  .sai-wallet-demo--hero .sai-wallet-demo-launch[data-demo-start] { border-color: ButtonText; }
  .sai-wallet-demo-launch::before,.sai-wallet-demo-launch::after { display: none; }
}

.sai-wallet-demo-dialog iframe.is-app-scene { height: 100%; min-height: 0; }

/* The picker and the selected app open in a full viewport experience. */
.sai-wallet-demo-dialog { padding: 0; }
.sai-wallet-demo-dialog .sai-wallet-demo-surface { width: 100%; height: 100dvh; border: 0; border-radius: 0; }

/* The ready player supplies the single header, including fullscreen and inline use. */

.sai-wallet-demo-dialog-heading{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,auto) minmax(90px,1fr);gap:20px}
.sai-wallet-demo-close{justify-self:end}
.sai-wallet-demo-steps{display:flex;align-items:center;gap:10px;min-width:0;overflow:auto;scrollbar-width:thin}
.sai-wallet-demo-steps>button{display:flex;align-items:center;gap:8px;flex:none;min-height:40px;padding:8px 4px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:light-dark(#766a5e,#beb4a9);font:600 11px/1.5 var(--sai-language-font,Inter),system-ui,sans-serif;white-space:nowrap;cursor:pointer}
.sai-wallet-demo-steps>button>span:first-child{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid light-dark(#d4c6b6,#665643);border-radius:50%;font-size:10px}
.sai-wallet-demo-steps>[aria-current]{border-bottom-color:#d58850;color:light-dark(#a04110,#ffb47e)}
.sai-wallet-demo-steps>[aria-current]>span:first-child{background:#ffb07a;color:#2a1b10;border-color:#ffb07a}
.sai-wallet-demo-steps>button:disabled{opacity:.6;cursor:default}
.sai-wallet-demo-steps>span{opacity:.4}
@media(max-width:1100px){.sai-wallet-demo-dialog-heading{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px}.sai-wallet-demo-steps{grid-row:2;grid-column:1/-1;justify-content:center}.sai-wallet-demo-close{grid-column:2;grid-row:1}}
@media(max-width:600px){.sai-wallet-demo-steps{justify-content:flex-start;gap:7px}.sai-wallet-demo-steps>button{gap:6px;font-size:10px;min-height:36px}.sai-wallet-demo-steps>button>span:first-child{width:19px;height:19px;font-size:9px}.sai-wallet-demo-dialog-heading p{max-width:260px;font-size:9px}}


/* Inline docs players fit below the sticky documentation header. This also lets
   native popovers use their own bounded scrolling on short landscape screens. */
.shareai-docs-page .sai-wallet-demo:not(.sai-wallet-demo--modal) iframe {
  height: min(860px, calc(100dvh - 150px));
  min-height: 280px;
}