*{box-sizing:border-box}html{color-scheme:light dark}body{margin:0;font:14px/1.55 var(--wallet-demo-font,Inter),system-ui,sans-serif;color:light-dark(#292722,#f0ece5);background:light-dark(#faf7f2,#1b1b19)}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #bd5c25;outline-offset:4px}.demo-player{display:flex;flex-direction:column;height:100vh;min-height:0}.demo-toolbar{padding:12px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid light-dark(#e6ded5,#39362f);background:light-dark(#fffdfa,#22211e)}.demo-toolbar>div{display:flex;gap:8px}.demo-toolbar button{min-height:36px;padding:7px 12px;border:1px solid light-dark(#e3d7ca,#494036);border-radius:7px;color:inherit;background:transparent;font-size:12px}.demo-label{display:flex;gap:8px;align-items:center;font-size:11px;font-weight:600;white-space:nowrap}.demo-label i{width:7px;height:7px;border-radius:50%;background:#da8d53}.demo-chapters{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 20px;overflow-x:auto;flex:none;scrollbar-width:thin}.demo-chapters button{border:0;background:none;color:light-dark(#766a5e,#beb4a9);font-size:12px;font-weight:600;padding:8px 2px;white-space:nowrap;border-bottom:2px solid transparent}.demo-chapters [aria-current]{border-color:#d58850;color:light-dark(#a04110,#ffb47e)}.demo-chapters span{opacity:.4}.demo-caption{margin:0;padding:0 22px 14px;text-align:center;font-size:12px;color:light-dark(#756b61,#bcb4a9);min-height:36px}.demo-player iframe{flex:1;min-height:0;width:100%;border:0;border-top:1px solid light-dark(#e6ded5,#39362f);background:light-dark(#fff8f1,#141414)}.demo-fallback{max-width:540px;padding:50px 24px;margin:auto}.demo-app{min-height:100vh;background:light-dark(#f3f3f0,#1d201f);color:light-dark(#282d2a,#edf0e9)}.sample-topbar{padding:20px 32px;display:flex;align-items:center;gap:18px;border-bottom:1px solid light-dark(#dddfd8,#363b37);font-size:12px}.sample-topbar a{color:inherit;text-decoration:none;margin-right:auto;font-size:17px;letter-spacing:-.04em}.sample-topbar>span:first-of-type{padding:3px 8px;border:1px solid light-dark(#cbd0c5,#50594e);border-radius:5px;color:light-dark(#65705e,#c2cebb);font-size:10px}.sample-avatar,.sai-demo-avatar{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:light-dark(#dfe6d9,#424e3a);font-size:10px}.sample-main{max-width:880px;margin:auto;padding:44px 28px 50px;display:grid;grid-template-columns:1.12fr 1fr;column-gap:50px;align-items:start}.sample-eyebrow{font-size:10px;letter-spacing:.14em;color:light-dark(#5a6a4e,#bccfa9);grid-column:1;margin:25px 0 12px}.sample-main h1{font-size:clamp(30px,3.5vw,47px);line-height:1.13;letter-spacing:-.05em;margin:0;grid-column:1}.sample-intro{font-size:14px;line-height:1.8;color:light-dark(#66705f,#b9c3b3);grid-column:1;max-width:360px;margin:22px 0}.sample-purchase{grid-column:2;grid-row:1/span 5;padding:25px;border:1px solid light-dark(#d9dfd1,#40483a);border-radius:16px;background:light-dark(#fffefa,#272c25);box-shadow:0 15px 40px #00000008;display:grid;grid-template-columns:42px 1fr;gap:0 13px}.sample-app-mark{display:grid;place-items:center;height:40px;background:light-dark(#e4eddc,#3c4d30);border-radius:10px;color:light-dark(#3d5e27,#c5e7a6);font-size:24px}.sample-purchase h2{font-size:19px;margin:0;line-height:1.3;letter-spacing:-.03em}.sample-purchase p{font-size:11px;color:light-dark(#626c5b,#b5bea9);margin:4px 0}.sample-price{grid-column:1/-1;display:block;font-size:36px;letter-spacing:-.04em;margin:26px 0 5px}.sample-price small{font-size:12px;font-weight:400;letter-spacing:0;color:light-dark(#637157,#b4bea9)}.sample-purchase ul{grid-column:1/-1;font-size:12px;line-height:2.3;padding-left:18px;margin-bottom:24px}.sample-pay{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:14px 15px;border:1px solid #b7d096;border-radius:8px;background:#d5edba;color:#25351c;font-size:12px;font-weight:650;min-height:48px}.sample-purchase .sample-note{grid-column:1/-1;font-size:10px;text-align:center;margin-top:12px;line-height:1.7}.sample-success{grid-column:1/-1!important;background:light-dark(#e9f4dc,#394b2b);color:light-dark(#3b6123,#d2ebbc)!important;border-radius:8px;padding:14px!important;font-size:13px!important}.sample-manage{grid-column:1;justify-self:start;background:none;border:0;color:light-dark(#3b6123,#d2ebbc);padding:10px 0;font-size:12px;font-weight:650}.sai-demo-account{display:grid;gap:4px;font-size:12px;padding:10px 0}.sai-demo-account span{font-size:10px;color:var(--sai-secondary-text)}.wallet-demo-hint.driver-popover{font-family:var(--wallet-demo-font,Inter),system-ui,sans-serif;border-radius:12px;max-width:min(310px,calc(100vw - 24px));padding:20px}.wallet-demo-hint .driver-popover-title{font-size:15px;line-height:1.4}.wallet-demo-hint .driver-popover-description{font-size:12px;line-height:1.7}.wallet-demo-hint .driver-popover-close-btn{width:28px;height:28px}
@media(max-width:650px){.demo-toolbar{padding:10px 12px;flex-wrap:wrap}.demo-toolbar>div{gap:5px}.demo-toolbar button{padding:6px 8px;font-size:10px}.demo-label{font-size:10px}.demo-chapters{justify-content:flex-start;gap:12px;padding:7px 14px}.demo-chapters button{font-size:11px}.demo-caption{font-size:11px;padding:5px 14px 12px;text-align:start}.sample-main{display:block;padding:22px 20px 40px;max-width:430px}.sample-eyebrow{margin-top:0}.sample-main h1{font-size:32px}.sample-intro{margin:14px 0 22px;font-size:12px}.sample-topbar{padding:15px 20px}.sample-topbar a{font-size:15px}.sample-purchase{padding:20px}.sample-price{font-size:30px;margin-top:18px}.sample-purchase ul{margin:12px 0 20px}.sample-manage{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.demo-app h1:focus{outline:none}

/* The sample app explains the Wallet before opening the untouched Console journey. */
.sample-brand { display: flex; align-items: center; gap: 10px; }
.sample-brand img { border-radius: 9px; }
.sample-user { display: flex; align-items: center; gap: 9px; color: light-dark(#4d5947, #cad2c4); font-size: 12px; }
.sample-user img { border-radius: 50%; object-fit: cover; }
.sample-main--wallet { max-width: 1120px; padding: 36px 32px 44px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; }
.sample-story { min-width: 0; padding-block: 6px; }
.sample-main--wallet .sample-eyebrow { margin: 14px 0 16px; }
.sample-main--wallet h1 { max-width: 500px; font-size: clamp(32px, 4vw, 52px); line-height: 1.08; text-wrap: balance; }
.sample-main--wallet .sample-intro { max-width: 450px; margin: 22px 0 30px; font-size: 15px; line-height: 1.85; }
.sample-balance { display: flex; align-items: flex-start; gap: 12px; padding: 20px 0; border-block: 1px solid light-dark(#dde1d5, #394031); }
.sample-balance-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid light-dark(#cdd9bf, #4f6241); border-radius: 11px; background: light-dark(#e9f1e0, #303d27); color: light-dark(#3e5d29, #c8e4ad); }
.sample-balance-icon svg { width: 21px; height: 21px; }
.sample-balance strong { display: block; font-size: 13px; }
.sample-balance p { margin: 6px 0 0; max-width: 320px; font-size: 11px; line-height: 1.7; color: light-dark(#65715c, #b6c2aa); }
.sample-accounts { display: flex; flex: none; padding-inline-start: 6px; margin-inline-start: auto; }
.sample-accounts img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid light-dark(#f3f3f0, #1d201f); object-fit: cover; }
.sample-accounts img + img { margin-inline-start: -10px; }
.sample-purchase--wallet { display: block; grid-column: auto; grid-row: auto; padding: 22px; border-radius: 20px; box-shadow: 0 16px 44px #0000000b; }
.sample-payment-title { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sample-payment-title > img { border-radius: 11px; }
.sample-purchase--wallet .sample-payment-title h2 { font-size: 17px; }
.sample-purchase--wallet .sample-payment-title p { margin: 3px 0 0; }
.sample-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sample-plans > div { min-width: 0; padding: 14px; border: 1px solid light-dark(#d7dfce, #4d5941); border-radius: 11px; background: light-dark(#f7faf3, #2b3525); }
.sample-plans > div > strong { font-size: 12px; }
.sample-purchase--wallet .sample-plan-price { margin: 6px 0 8px; color: inherit; font-size: 27px; font-weight: 650; letter-spacing: -.04em; line-height: 1.2; }
.sample-plan-price small { font-size: 10px; font-weight: 400; letter-spacing: 0; margin-inline-start: 3px; color: light-dark(#5f7055, #c0cdb4); white-space: nowrap; }
.sample-plans > div > span { display: block; font-size: 11px; }
.sample-plans b { color: light-dark(#42632c, #cbe9b0); }
.sample-plans > div > small { display: block; margin-top: 5px; font-size: 10px; color: light-dark(#66715e, #b7c2ac); }
.sample-purchase--wallet .sample-plan-note { margin: 12px 0 18px; font-size: 10px; line-height: 1.7; }
.sample-key-retired { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px dashed light-dark(#d3d7cc, #4f5649); border-radius: 8px; color: light-dark(#686f60, #b0b7a8); }
.sample-key-retired > svg { width: 19px; height: 19px; flex: none; opacity: .65; }
.sample-key-retired s { font-size: 12px; text-decoration-thickness: 1px; }
.sample-key-retired small { display: block; font-size: 10px; margin-top: 3px; }
.sample-key-retired > span { margin-inline-start: auto; font-size: 18px; opacity: .6; }
.sample-wallet-choice { margin: 16px 0 12px; }
.sample-wallet-choice strong { font-size: 12px; }
.sample-purchase--wallet .sample-wallet-choice p { margin: 4px 0 0; font-size: 10px; line-height: 1.7; }
.sample-start-hint { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin: 0 2px 8px !important; color: light-dark(#94501c, #ffc094) !important; font-size: 10px !important; font-weight: 600; }
.sample-start-hint i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: sample-invite-dot 2.4s ease-in-out 4; }
.sample-purchase--wallet .sample-pay { position: relative; width: 100%; min-height: 48px; gap: 12px; overflow: hidden; border-color: light-dark(#f2ae7c, #e79c66); background: #ffb07a; color: #2a1b10; }
.sample-pay > svg { width: 21px; height: 21px; flex: none; }
.sample-pay > span:last-child { margin-inline-start: auto; }
.sample-pay--invite { animation: sample-invite-ring 3s ease-out 3; }
.sample-pay--invite::after { content: ''; position: absolute; inset: 0; width: 35%; transform: translateX(-180%) skewX(-20deg); background: linear-gradient(90deg, transparent, #ffffff60, transparent); animation: sample-invite-sheen 3.6s ease-in-out 3; pointer-events: none; }
.sample-pay:is(:hover, :focus-visible) { filter: brightness(1.04); animation: none; }
.sample-pay:is(:hover, :focus-visible)::after { animation: none; }
.sample-purchase--wallet .sample-note { margin: 12px 0 0; font-size: 10px; line-height: 1.7; }
.sample-purchase--wallet .sample-success { margin: 12px 0 0; font-size: 12px !important; line-height: 1.7; }
.sample-connected-account { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.sample-connected-account img { border-radius: 50%; object-fit: cover; }
.sample-connected-account small { display: block; color: light-dark(#65715c, #b6c2aa); font-size: 10px; }
.sample-connected-account strong { display: block; font-size: 12px; }
.sample-connected-account > span { color: light-dark(#44692c, #b8d99b); margin-inline-start: auto; }
@keyframes sample-invite-dot { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes sample-invite-ring { 0% { box-shadow: 0 0 0 0 #ffb07a50; } 75%, 100% { box-shadow: 0 0 0 9px #ffb07a00; } }
@keyframes sample-invite-sheen { 0%, 35% { transform: translateX(-180%) skewX(-20deg); } 75%, 100% { transform: translateX(420%) skewX(-20deg); } }
@media (max-width: 750px) {
  .sample-main--wallet { display: flex; flex-direction: column; gap: 24px; padding: 24px 20px 36px; max-width: 530px; }
  .sample-main--wallet h1 { font-size: 36px; }
  .sample-main--wallet .sample-intro { margin: 16px 0 20px; font-size: 13px; }
  .sample-purchase--wallet { width: 100%; padding: 20px; }
  .sample-balance { padding-block: 16px; }
  .sample-topbar { gap: 12px; }
  .sample-topbar > span:first-of-type { display: none; }
  .sample-user { gap: 7px; font-size: 10px; }
  .sample-user img { width: 28px; height: 28px; }
  .sample-brand strong { font-size: 13px; }
}
@media (max-width: 360px) {
  .sample-main--wallet { padding-inline: 16px; }
  .sample-main--wallet h1 { font-size: 32px; }
  .sample-balance { flex-wrap: wrap; }
  .sample-accounts { display: none; }
  .sample-purchase--wallet { padding: 16px; }
  .sample-plans > div { padding: 11px; }
  .sample-plan-price small { display: block; margin: 4px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sample-start-hint i, .sample-pay--invite, .sample-pay--invite::after { animation: none; }
}
@media(max-width:750px),(max-height:600px){
 .sample-main--wallet{padding-bottom:130px}
 .sample-pay-start{position:fixed;z-index:10;inset-inline:20px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:26px 0 0;background:linear-gradient(transparent,light-dark(#f3f3f0ee,#1d201fee) 45%);pointer-events:none}
 .sample-pay-start .sample-pay{pointer-events:auto;box-shadow:0 8px 24px #0002}
}

.picker-brand { display: inline-flex; align-items: center; gap: 10px; margin-inline-end: auto; font-weight: 650; font-size: 15px; letter-spacing: -.025em; }
.picker-brand svg { width: 24px; height: 24px; color: light-dark(#a14b17,#ffb47f); }
.sample-picker { max-width: 1120px; margin-inline: auto; padding: clamp(30px,5vh,60px) 32px 36px; }
.picker-intro { max-width: 780px; margin-inline: auto; text-align: center; }
.sample-picker h1 { font-size: clamp(34px,4.2vw,58px); line-height: 1.1; letter-spacing: -.055em; margin: 14px 0 20px; text-wrap: balance; }
.picker-lead { max-width: 620px; margin: 0 auto 18px; color: light-dark(#58644e,#c4cdbb); font-size: 15px; line-height: 1.85; }
.picker-promise { display: inline-flex; padding: 7px 13px; border: 1px solid light-dark(#d6ddcd,#48543d); border-radius: 30px; color: light-dark(#4c652e,#d2e9ba); background: light-dark(#eaf1e1,#2c3625); font-size: 11px; }
.sample-picker section { margin-top: 34px; }
.sample-picker h2 { margin: 0 0 16px; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.picker-apps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.picker-app { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 24px; text-align: start; color: inherit; border: 1px solid light-dark(#dde0d6,#444b3d); border-radius: 20px; background: light-dark(#fffefa,#282d25); box-shadow: 0 10px 28px #00000006; transition: transform .2s ease,border-color .2s ease,background .2s ease; }
.picker-app:hover { transform: translateY(-4px); border-color: light-dark(#b2bc9f,#7a8a66); background: light-dark(#fafcf6,#2d3527); }
.picker-app:focus-visible { outline: 3px solid light-dark(#9b4a17,#ffb47f); outline-offset: 4px; }
.picker-app-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.picker-app-top img { border-radius: 15px; }
.picker-app-top small { color: light-dark(#617157,#c0cbb4); font-size: 10px; }
.picker-app > strong { font-size: 22px; letter-spacing: -.035em; }
.picker-app-description { flex: 1; color: light-dark(#617157,#c0cbb4); font-size: 12px; line-height: 1.85; }
.picker-app-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 15px; border-top: 1px solid light-dark(#e3e6dc,#414b38); color: light-dark(#9a4611,#ffb47f); font-size: 12px; font-weight: 650; }
.picker-note { margin: 18px 0 0; text-align: center; color: light-dark(#64715a,#bbc6af); font-size: 10px; line-height: 1.8; }
.sample-back { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid light-dark(#cbd5c0,#4f5c45); border-radius: 8px; color: inherit; background: transparent; font-size: 18px; }
.sample-brand { margin-inline-end: auto; }
.demo-toolbar { flex: none; }
.demo-toolbar #close-demo { color: light-dark(#9a4611,#ffb47f); }
.demo-chapters { justify-content: flex-start; }
@media(min-width:1200px){.demo-chapters{justify-content:center}}
@media(max-width:700px){
 .sample-picker { padding: 26px 20px 30px; }
 .sample-picker h1 { font-size: 38px; }
 .picker-intro { text-align: start; }
 .picker-lead { font-size: 13px; }
 .picker-promise { font-size: 10px; border-radius: 10px; }
 .sample-picker section { margin-top: 26px; }
 .picker-apps { grid-template-columns: 1fr; gap: 12px; }
 .picker-app { padding: 18px; gap: 12px; }
 .picker-app-top img { width: 44px; height: 44px; border-radius: 12px; }
 .picker-app > strong { font-size: 21px; }
 .picker-app-description { font-size: 12px; }
 .picker-app-action { padding-top: 12px; }
 .picker-note { text-align: start; }
 .demo-toolbar { padding: 8px 12px; }
 .demo-toolbar > div { flex-wrap: wrap; }
 .demo-label { width: 100%; }
 .sample-topbar { padding-inline: 16px; }
 .sample-brand strong { font-size: 12px; }
 .sample-user > span { display: none; }
}
@media(prefers-reduced-motion:reduce){.picker-app{transition:none}.picker-app:hover{transform:none}}
.sample-topbar > span.picker-brand,.sample-topbar > span.sample-brand { display: inline-flex; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 16px; color: inherit; }
.sample-topbar > [data-demo-copy="Sample app"] { padding: 3px 8px; border: 1px solid light-dark(#cbd0c5,#50594e); border-radius: 5px; font-size: 10px; color: light-dark(#65705e,#c2cebb); }
.sample-picker { padding-block: 24px 28px; }
.picker-intro { max-width: 920px; }
.picker-intro .sample-eyebrow { margin: 0 0 12px; }
.sample-picker h1 { font-size: clamp(34px,3.5vw,50px); margin: 0 0 16px; }
.picker-lead { font-size: 14px; line-height: 1.75; margin-bottom: 12px; }
.picker-promise { margin: 0; }
.sample-picker section { margin-top: 24px; }
.picker-app { padding: 20px; gap: 14px; }
.picker-app-top img { width: 48px; height: 48px; border-radius: 13px; }
.picker-app-action { padding-top: 12px; }
@media(max-width:700px){
 .sample-topbar > span.sample-brand { display: inline-flex; }
 .sample-topbar > [data-demo-copy="Sample app"] { display: none; }
 .sample-picker h1 { font-size: 36px; }
 .picker-intro .sample-eyebrow { font-size: 9px; }
 .picker-app { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 7px 14px; padding: 16px; }
 .picker-app-top { display: contents; }
 .picker-app-top img { grid-column: 1; grid-row: 1 / span 3; width: 44px; height: 44px; }
 .picker-app-top small { display: none; }
 .picker-app > strong,.picker-app-description,.picker-app-action { grid-column: 2; }
 .picker-app > strong { font-size: 19px; }
 .picker-app-description { font-size: 11px; line-height: 1.7; }
 .picker-app-action { margin-top: 3px; padding-top: 9px; font-size: 11px; }
}

/* A return from authorization is a focused confirmation, followed by one next step. */
.sample-return { min-height: calc(100svh - 77px); display: grid; place-items: center; padding: 36px 24px 48px; text-align: center; }
.sample-return-content { width: min(100%,660px); }
.sample-return-mark { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 20px; border: 1px solid light-dark(#c5d6b6,#536a41); border-radius: 22px; color: light-dark(#48682e,#d1edb9); background: light-dark(#e5efdc,#2d3b25); box-shadow: 0 0 0 8px light-dark(#e5efdc55,#2d3b2555); }
.sample-return-mark svg { width: 34px; height: 34px; }
.sample-return .sample-eyebrow { margin: 0 0 12px; }
.sample-return h1 { margin: 0; font-size: clamp(30px,3.8vw,48px); line-height: 1.13; letter-spacing: -.05em; text-wrap: balance; }
.sample-return-intro { max-width: 520px; margin: 18px auto 22px; color: light-dark(#5c6854,#c1cbb7); font-size: 14px; line-height: 1.8; text-wrap: pretty; }
.sample-return-connection { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; }
.sample-return-connection img { border-radius: 10px; object-fit: cover; }
.sample-return-connection img:nth-of-type(2) { border-radius: 50%; }
.sample-return-connection > span { margin-inline: 6px; color: light-dark(#68755c,#b7c6a7); }
.sample-return-status { margin: 14px 0 0; font-size: 11px; color: light-dark(#4d6b33,#c5dda9); }
.sample-return-next { margin: 28px auto 0; padding: 24px 24px 0; border-top: 1px solid light-dark(#d8dece,#3c4733); max-width: 540px; }
.sample-return-next h2 { margin: 0; font-size: 17px; letter-spacing: -.025em; }
.sample-return-next p { margin: 10px auto 18px; max-width: 390px; font-size: 12px; line-height: 1.8; color: light-dark(#606e56,#bcc8b0); }
.sample-return-primary { display: inline-flex; justify-content: center; align-items: center; gap: 24px; min-height: 48px; padding: 12px 20px; border: 1px solid #ffb07a; border-radius: 10px; background: #ffb07a; color: #2a1b10; font-size: 13px; font-weight: 650; }
.sample-return-content > .sample-return-primary { margin-top: 22px; }
.sample-return-next small { display: block; margin-top: 12px; font-size: 10px; color: light-dark(#606d55,#b3c0a6); }
@media(max-width:600px){
 .sample-return { padding: 30px 20px 36px; }
 .sample-return-mark { width: 56px; height: 56px; border-radius: 18px; }
 .sample-return-intro { font-size: 12px; }
 .sample-return-connection { gap: 8px; font-size: 11px; }
 .sample-return-connection img { width: 28px; height: 28px; }
 .sample-return-next { padding-inline: 0; }
 .sample-return-next h2 { font-size: 16px; }
 .sample-return-primary { width: 100%; font-size: 12px; }
}

/* Keep the complete highlight inside controls, including horizontally scrolling tabs. */
[data-wallet-guide-target] {
 outline: 2px solid light-dark(#b65011,#ffad73) !important;
 outline-offset: -2px !important;
 border-radius: 10px !important;
 background-color: light-dark(#fff0e2,#3b2d23) !important;
 scroll-margin-block: 36px;
}
[data-wallet-guide-target]:focus-visible { outline-width: 3px !important; outline-offset: -4px !important; }
.sai-console .scc-limit-form { max-height: calc(var(--wallet-demo-visible-height,100dvh) - 24px) !important; }
@media(max-width:600px),(max-height:600px){
 .sample-return--ready { padding-bottom: 126px; }
 .sample-return--ready .sample-return-next { position: fixed; z-index: 10; inset-inline: 0; bottom: 0; width: 100%; max-width: none; margin: 0; padding: 12px 20px calc(14px + env(safe-area-inset-bottom,0px)); background: light-dark(#f3f3f0,#1d201f); box-shadow: 0 -12px 24px light-dark(#f3f3f0aa,#1d201faa); }
 .sample-return--ready .sample-return-next h2 { font-size: 12px; }
 .sample-return--ready .sample-return-next p,.sample-return--ready .sample-return-next small { display: none; }
 .sample-return--ready .sample-return-next button { margin-top: 10px; width: min(100%,440px); }
 .sample-return-mark { width: 46px; height: 46px; margin-bottom: 16px; border-radius: 16px; }
 .sample-return-mark svg { width: 28px; height: 28px; }
 .sample-return-intro { margin-block: 14px 18px; }
}
@media(max-height:400px){
 .sample-return { padding-top: 20px; }
 .sample-return-mark,.sample-return .sample-eyebrow { display: none; }
 .sample-return--ready .sample-return-next h2 { display: none; }
 .sample-return--ready .sample-return-next button { margin-top: 0; }
}
@media(max-width:600px),(max-height:600px){
 .sample-return:not(.sample-return--ready) { padding-bottom: 108px; }
 .sample-return:not(.sample-return--ready) .sample-return-content > .sample-return-primary { position: fixed; z-index: 10; inset-inline: 20px; bottom: calc(14px + env(safe-area-inset-bottom,0px)); width: calc(100% - 40px); margin: 0; box-shadow: 0 0 0 12px light-dark(#f3f3f0,#1d201f),0 -16px 24px light-dark(#f3f3f0aa,#1d201faa); }
}

/* Short embeds lend their navigation space to the app’s active login dialog. */
@media(max-height:600px){.demo-player.is-app-login>:is(.demo-toolbar,.demo-chapters,.demo-caption){display:none}}

/* One header owns the title, three journey steps and close action. */
.demo-header{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,auto) minmax(90px,1fr);align-items:center;gap:20px;padding:15px 22px;border-bottom:1px solid light-dark(#e6ded5,#39362f);background:light-dark(#fffdfa,#22211e);flex:none}
.demo-header-copy h1{margin:0;font-size:15px;line-height:1.4;letter-spacing:-.025em}
.demo-header-copy p{margin:4px 0 0;color:light-dark(#716354,#c4b8a9);font-size:10px;line-height:1.6}
.demo-header .demo-chapters{min-width:0;margin:0;padding:0;gap:10px;justify-content:flex-start}
.demo-header .demo-chapters button{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 4px;font-size:11px}
.demo-step-number{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid light-dark(#d4c6b6,#665643);border-radius:50%;font-size:10px;opacity:1!important}
.demo-chapters [aria-current] .demo-step-number{background:#ffb07a;color:#2a1b10;border-color:#ffb07a}
.demo-chapters button:disabled{cursor:default;opacity:.6}
.demo-header-close{justify-self:end;display:flex;align-items:center;gap:12px;min-height:38px;padding:8px 12px;border:1px solid light-dark(#e3d7ca,#544637);border-radius:9px;background:transparent;color:inherit;font-size:12px;white-space:nowrap}
.demo-header-close[hidden]{display:none}
.demo-header-close span{font-size:21px;line-height:1}
.demo-caption{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
@media(max-width:1100px){.demo-header{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;padding:12px 16px}.demo-header .demo-chapters{grid-row:2;grid-column:1/-1;justify-content:center}.demo-header-close{grid-column:2;grid-row:1}}
@media(max-width:600px){.demo-header{padding:10px 12px;gap:8px 12px}.demo-header-copy h1{font-size:13px}.demo-header-copy p{font-size:9px;max-width:260px}.demo-header .demo-chapters{justify-content:flex-start;gap:7px}.demo-header .demo-chapters button{font-size:10px;gap:6px;min-height:36px}.demo-step-number{width:19px;height:19px;font-size:9px}.demo-header-close{font-size:11px;padding:7px 9px}}
@media(max-height:600px){.demo-player.is-app-login>.demo-header{display:none}}

.demo-header .demo-chapters [data-step-label]{opacity:1}

:root:not(:fullscreen) .demo-player.has-host-header>.demo-header{display:none}

/* The coach shares the Console's appearance instead of Driver's white default. */
.wallet-demo-hint.driver-popover {
 --wallet-hint-surface: light-dark(#fffdfa,#2b2722);
 --wallet-hint-accent: light-dark(#a2440b,#ffb47e);
 min-width: 0;
 width: min(332px,calc(100vw - 32px));
 max-width: calc(100vw - 32px);
 padding: 20px;
 border: 1px solid light-dark(#ddc5af,#705039);
 border-radius: 16px;
 background: var(--wallet-hint-surface);
 color: var(--sai-text,light-dark(#292722,#f0ece5));
 box-shadow: 0 16px 48px light-dark(#3b271b24,#0008),0 2px 8px #00000014;
 text-align: start;
}
.wallet-demo-hint .wallet-hint-step {
 display: block;
 margin: 0 40px 10px 0;
 color: var(--wallet-hint-accent);
 font-size: 10px;
 font-weight: 700;
 line-height: 1.5;
 letter-spacing: .04em;
}
.wallet-demo-hint .driver-popover-title {
 margin: 0;
 padding-inline-end: 28px;
 color: inherit;
 font-size: 15px;
 font-weight: 700;
 line-height: 1.45;
 letter-spacing: -.02em;
}
.wallet-demo-hint .driver-popover-title:focus { outline: none; }
.wallet-demo-hint .driver-popover-description {
 margin: 8px 0 0 !important;
 color: light-dark(#65594d,#d0c3b4);
 font-size: 12px;
 line-height: 1.75;
}
.wallet-demo-hint .driver-popover-arrow { border-width: 7px;filter: drop-shadow(0 0 1px light-dark(#b99574,#a47753)); }
.wallet-demo-hint.driver-popover .driver-popover-close-btn {
 display: grid;
 place-items: center;
 top: 10px;
 right: auto;
 inset-inline-end: 10px;
 width: 32px;
 height: 32px;
 padding: 0;
 border: 1px solid light-dark(#e7d9ca,#63503d);
 border-radius: 9px;
 background: light-dark(#f8f2ea,#382f26);
 color: light-dark(#70523a,#edc4a3);
 font: 20px/1 var(--wallet-demo-font,Inter),system-ui,sans-serif;
}
.wallet-demo-hint.driver-popover .driver-popover-close-btn:hover { background: light-dark(#f0e2d2,#503c2c);color: var(--wallet-hint-accent); }
.wallet-demo-hint.driver-popover .driver-popover-close-btn:focus-visible { outline: 2px solid var(--wallet-hint-accent);outline-offset: 2px; }
.wallet-demo-hint .driver-popover-arrow-side-top { border-top-color: var(--wallet-hint-surface); }
.wallet-demo-hint .driver-popover-arrow-side-bottom { border-bottom-color: var(--wallet-hint-surface); }
.wallet-demo-hint .driver-popover-arrow-side-left { border-left-color: var(--wallet-hint-surface); }
.wallet-demo-hint .driver-popover-arrow-side-right { border-right-color: var(--wallet-hint-surface); }
.wallet-demo-hint[dir=rtl] .wallet-hint-step { margin-inline: 0 40px; }
@media(max-width:600px){.wallet-demo-hint.driver-popover{padding:18px}.wallet-demo-hint .driver-popover-title{font-size:14px}.wallet-demo-hint .driver-popover-description{font-size:11px}}

/* Tutorials are contextual popovers. They never reserve a footer row. */
.wallet-tutorial.driver-popover{display:flex;flex-direction:column;gap:0;margin:0;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.wallet-tutorial .wallet-tutorial-step{align-self:flex-start;width:fit-content;margin:0 38px 12px 0;padding:5px 9px;border-radius:999px;background:light-dark(#fff0df,#473222);color:light-dark(#8d3e0c,#ffbd8e);font-size:10px;letter-spacing:.025em}
.wallet-tutorial .driver-popover-title{flex-shrink:0;font-size:17px}
.wallet-tutorial .driver-popover-description{min-height:0;overflow:auto}
.wallet-tutorial .driver-popover-description p{margin:0;font-size:12px;line-height:1.75;color:inherit}
.wallet-tutorial-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;flex-shrink:0}
.wallet-tutorial-actions :is(button,a){display:inline-flex;align-items:center;justify-content:center;min-height:40px;max-width:100%;padding:10px 13px;border:1px solid light-dark(#ddc8b5,#65503f);border-radius:9px;font:600 11px/1.5 var(--wallet-demo-font,Inter),system-ui,sans-serif;text-decoration:none;text-align:center;white-space:normal;cursor:pointer}
.wallet-tutorial-actions .wallet-tutorial-primary{flex:1 0 100%;background:#ffb07a;color:#2a1b10;border-color:#ffb07a}
.wallet-tutorial-actions .wallet-tutorial-primary:hover{background:#ffc18f}
.wallet-tutorial-actions .wallet-tutorial-secondary{flex:1;background:transparent;color:light-dark(#8d4210,#ffbc8a)}
.wallet-tutorial-launcher{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;min-height:34px;padding:6px 9px;border:1px solid light-dark(#d6c9ba,#574b3e);border-radius:9px;background:light-dark(#fffaf4,#2b251f);color:light-dark(#7f4215,#f7bd8c);font:600 11px/1.4 var(--wallet-demo-font,Inter),system-ui,sans-serif;cursor:pointer}
.wallet-tutorial-launcher>span:first-child{display:grid;place-items:center;width:17px;height:17px;border:1px solid currentColor;border-radius:50%;font-size:11px}
.wallet-tutorial-launcher:focus-visible,.wallet-tutorial-actions :is(button,a):focus-visible{outline:2px solid light-dark(#ac4f14,#ffb47e);outline-offset:3px}
.wallet-tutorial-active .driver-overlay,.wallet-tutorial-active .driver-overlay path{pointer-events:none!important}
/* This guidance is nonmodal: native controls remain usable outside its target. */
.wallet-tutorial-active.driver-active :is(a,button,textarea,input,select,label){pointer-events:auto}
.wallet-native-step{display:inline-block;align-self:flex-start;margin-bottom:12px;padding:5px 9px;border-radius:999px;background:light-dark(#fff0df,#473222);color:light-dark(#8d3e0c,#ffbd8e);font:650 10px/1.5 var(--wallet-demo-font,Inter),system-ui,sans-serif}
@media(max-width:500px){.wallet-tutorial-launcher{width:32px;min-height:32px;padding:4px}.wallet-tutorial-launcher>span:last-child{display:none}}
@media(max-height:500px){.wallet-tutorial.driver-popover{width:min(430px,calc(100vw - 24px));padding:14px 16px}.wallet-tutorial .wallet-tutorial-step{margin-bottom:8px;padding:3px 8px}.wallet-tutorial .driver-popover-title{font-size:14px}.wallet-tutorial .driver-popover-description p{font-size:11px;line-height:1.6}.wallet-tutorial-actions{margin-top:12px}.wallet-tutorial-actions :is(button,a){min-height:34px;padding:7px 11px;font-size:10px}.wallet-tutorial-actions .wallet-tutorial-primary{flex:1}}

@keyframes wallet-tutorial-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.wallet-tutorial.driver-popover{animation:wallet-tutorial-in .16s ease-out}
@media(prefers-reduced-motion:reduce){.wallet-tutorial.driver-popover{animation:none}}

.wallet-tutorial-actions .wallet-tutorial-secondary:hover{background:light-dark(#fff1e4,#473326)}

/* Guides float above the interface. A pointer must never create a horizontal scroller. */
.wallet-tutorial .driver-popover-arrow{display:none}
.wallet-tutorial.driver-popover{overflow-x:hidden;max-height:min(calc(100dvh - 24px),calc(var(--wallet-demo-visible-height,100dvh) - 24px))}
.wallet-choice-guide.driver-popover{left:50%!important;right:auto!important;bottom:auto!important;top:var(--wallet-guide-top,16px)!important;translate:-50% 0;width:min(370px,calc(100vw - 32px));min-width:0;overflow:visible}
.wallet-choice-guide::after{content:"";position:absolute;top:100%;left:calc(50% - 8px);width:16px;height:10px;background:light-dark(#fffaf5,#30271f);clip-path:polygon(0 0,100% 0,50% 100%)}
.wallet-choice-guide .driver-popover-description{overflow:auto}
.wallet-choice-guide .wallet-tutorial-step{margin-inline-end:38px}
.wallet-authorization-guide.driver-popover{left:50%!important;right:auto!important;bottom:auto!important;top:var(--wallet-guide-top,16px)!important;translate:-50% 0;width:min(300px,calc(100vw - 24px));min-width:0}
.wallet-account-tooltip{position:fixed;inset:auto;width:min(300px,calc(100vw - 24px));max-width:calc(100vw - 24px);margin:0;padding:17px;border:1px solid light-dark(#dfc6ad,#6b5039);border-radius:14px;background:light-dark(#fffaf5,#30271f);color:light-dark(#3b2c21,#f8e9db);box-shadow:0 14px 45px #0003;font:500 12px/1.7 var(--wallet-demo-font,Inter),system-ui,sans-serif;overflow-wrap:anywhere;text-align:start}
.wallet-account-tooltip>span{display:inline-block;margin:0 0 10px;padding:4px 8px;border-radius:999px;background:light-dark(#ffead7,#473121);color:light-dark(#874017,#ffc79e);font-size:10px}
.wallet-account-tooltip>strong{display:block;font-size:16px;line-height:1.4}
.wallet-account-tooltip>p{margin:8px 0 0;color:light-dark(#65594d,#d0c3b4)}
@media(max-height:500px){.wallet-account-tooltip{padding:12px;font-size:11px;line-height:1.6}.wallet-account-tooltip>span,.wallet-account-tooltip>strong{display:none}.wallet-account-tooltip>p{margin:0}}
.sbo-card:has(>.wallet-tutorial-launcher){position:relative}
.sbo-card>.wallet-tutorial-launcher{float:inline-end;margin:0 0 12px 12px}

/* The successful connection is its own accessible top layer, followed by a clear choice. */
.wallet-connection-success{position:fixed;inset:0 auto auto 0;width:100%;max-width:none;height:min(100dvh,var(--wallet-demo-visible-height,100dvh));max-height:100dvh;margin:0;padding:24px;border:0;background:transparent;color:light-dark(#30271f,#fff5e9);overflow:auto;overscroll-behavior:contain;font-family:var(--wallet-demo-font,Inter),system-ui,sans-serif}
.wallet-connection-success[open]{display:flex;align-items:safe center;justify-content:center}
.wallet-connection-success::backdrop{background:light-dark(#37271b88,#100e0ccc);backdrop-filter:blur(7px)}
.wallet-success-card{position:relative;z-index:2;flex:none;width:min(580px,100%);margin:auto;padding:clamp(24px,4vw,42px);border:1px solid light-dark(#e4cdb8,#72543c);border-radius:26px;background:light-dark(#fffaf4,#29231e);box-shadow:0 28px 100px #0004;text-align:center;overflow-wrap:anywhere}
.wallet-success-close{position:absolute;inset:12px 12px auto auto;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid light-dark(#e6d5c4,#665240);border-radius:50%;background:transparent;color:inherit;font:400 24px/1 system-ui,sans-serif;cursor:pointer}
.wallet-success-step{display:inline-block;margin:0 30px 22px;padding:6px 11px;border-radius:999px;background:light-dark(#ffead7,#473121);color:light-dark(#874017,#ffc79e);font-size:11px;font-weight:600}
.wallet-success-emblem{display:grid;place-items:center;width:80px;height:80px;margin:0 auto 22px;border:1px solid light-dark(#b7d4ae,#63845b);border-radius:24px;background:light-dark(#edf7e7,#2e3d28);color:light-dark(#39722a,#c6ecb7);box-shadow:0 0 0 9px light-dark(#f4f9f0,#2b3024)}
.wallet-success-emblem svg{width:48px;height:48px}
.wallet-success-card h2{margin:0;font-size:clamp(26px,3.4vw,38px);line-height:1.22;letter-spacing:-.035em;text-wrap:balance;outline:none}
.wallet-success-confirmation{margin:18px auto 0;max-width:440px;font-size:18px;font-weight:600;line-height:1.55;text-wrap:balance}
.wallet-success-description{margin:18px auto 0;max-width:440px;font-size:14px;line-height:1.8;color:light-dark(#73604e,#d8c6b5)}
.wallet-success-actions{margin-top:28px;gap:10px;justify-content:center}
.wallet-success-actions :is(button,a){min-height:48px;padding:12px 18px;font-size:13px;border-radius:12px}
.wallet-success-actions .wallet-tutorial-secondary{flex:0 1 auto;border-color:transparent}
.wallet-success-actions .wallet-tutorial-secondary:hover{border-color:light-dark(#d9c4af,#65503f)}
.wallet-confetti{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
@media(max-width:500px){.wallet-connection-success{padding:16px}.wallet-success-card{padding:28px 20px 20px;border-radius:20px}.wallet-success-step{margin-bottom:20px}.wallet-success-emblem{width:64px;height:64px;margin-bottom:20px;border-radius:20px}.wallet-success-emblem svg{width:40px;height:40px}.wallet-success-confirmation{font-size:16px}.wallet-success-description{font-size:13px}.wallet-success-actions{margin-top:22px}}
@media(max-height:500px) and (min-width:650px){.wallet-success-card{padding:22px 32px}.wallet-success-step{margin-bottom:12px}.wallet-success-emblem{width:46px;height:46px;margin-bottom:12px;border-radius:14px}.wallet-success-emblem svg{width:32px;height:32px}.wallet-success-card h2{font-size:26px}.wallet-success-confirmation{margin-top:12px;font-size:15px}.wallet-success-description{margin-top:12px;font-size:12px;line-height:1.65}.wallet-success-actions{margin-top:16px}}
@media(forced-colors:active){.wallet-success-card,.wallet-success-emblem,.wallet-success-actions button{border:1px solid CanvasText}.wallet-confetti{display:none}}