.component-showcase{--showcase-ink:var(--h2-ink);--showcase-muted:color-mix(in srgb, var(--h2-ink) 55%, var(--h2-bg));--showcase-line:color-mix(in srgb, var(--h2-ink) 12%, var(--h2-bg));--showcase-soft:color-mix(in srgb, var(--h2-ink) 3%, var(--h2-bg));--showcase-shadow:color-mix(in srgb, var(--h2-ink) 10%, transparent);color:var(--showcase-ink);margin:0;padding:0;position:relative}.component-showcase__frame{background:var(--h2-bg);padding-top:0}.component-showcase.h2-rule:before,.component-showcase.h2-rule:after{z-index:3}.component-showcase__controls{z-index:4;border:1px solid color-mix(in srgb, var(--h2-ink) 7%, var(--h2-bg));background:var(--h2-bg);border-radius:9999px;align-items:center;gap:4px;width:max-content;max-width:calc(100% - 32px);padding:3px;display:flex;position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}.component-showcase__selector{overscroll-behavior-x:contain;scrollbar-width:none;border-radius:9999px;grid-auto-columns:max-content;grid-auto-flow:column;gap:4px;min-width:0;margin:0;display:grid;position:relative;overflow-x:auto}.component-showcase__selector::-webkit-scrollbar{display:none}.component-showcase__selector .component-showcase__choice>span{white-space:nowrap}.component-showcase__choice{cursor:pointer;min-width:0;position:relative}.component-showcase__choice input{opacity:0;width:1px;height:1px;margin:0;position:absolute}.component-showcase__choice>span{min-height:34px;color:var(--showcase-muted);border-radius:9999px;justify-content:center;align-items:center;gap:9px;padding:6px 16px;font-size:12px;font-weight:500;transition:background-color .16s,color .16s;display:flex}.component-showcase__choice input:checked+span{color:var(--showcase-ink)}.component-showcase__choice input:focus-visible+span{outline:2px solid var(--showcase-ink);outline-offset:2px}.component-showcase__dot{background:var(--h2-stone);border-radius:50%;flex:none;width:7px;height:7px}.component-showcase__choice input:checked+span .component-showcase__dot{background:var(--showcase-ink)}.component-showcase__viewport{isolation:isolate;height:640px;position:relative;overflow:clip}.component-showcase__intro{padding-block:var(--h2-inset);flex-direction:column;scroll-margin-top:80px;display:flex}.component-showcase__intro .h2-banner{flex:1;min-height:0}@media (width<=900px){.component-showcase__intro .h2-banner{padding-bottom:44px}}.component-showcase__intro h2{white-space:pre-line;max-width:none;margin:0;font-size:clamp(27px,2.9vw,38px)}@media (width>=761px){.component-showcase__intro{min-height:var(--h2-band-h)}}.component-showcase__glow{background:radial-gradient(ellipse, color-mix(in srgb, var(--showcase-ink) 4%, transparent), transparent 65%);pointer-events:none;position:absolute;inset:8% 5%}.component-showcase__world{width:0;height:0;transition:transform .7s cubic-bezier(.23,1,.32,1);position:absolute;top:50%;left:50%}.component-showcase__position{opacity:.18;pointer-events:none;width:360px;transition:opacity .25s;position:absolute;transform:translate(-50%,-50%)}.component-showcase__position[data-active=true]{opacity:1;z-index:2;pointer-events:auto}.showcase-preview[data-preview=transaction-modal]{min-height:400px}.showcase-preview[data-preview=profile]{min-height:470px}.component-showcase__fade{z-index:3;pointer-events:none;background:linear-gradient(to right, var(--h2-bg), transparent 13%, transparent 87%, var(--h2-bg)), linear-gradient(to bottom, var(--h2-bg), transparent 8%, transparent 92%, var(--h2-bg));position:absolute;inset:0}.component-showcase__position:has(>.showcase-preview__embed){width:min(440px,100vw - 32px)}.showcase-preview__embed{background:0 0;border:0;width:100%;height:620px;display:block}.showcase-preview__embed[data-preview=profile]{height:800px}.showcase-preview__embed[data-preview=profile],.showcase-preview__embed[data-preview=transaction-modal],.showcase-preview__embed[data-preview=voiceid]{filter:drop-shadow(0 12px 18px #0000001f)}.showcase-preview{border:1px solid var(--showcase-line);background:var(--h2-bg);box-shadow:0 2px 3px var(--showcase-shadow), 0 20px 45px var(--showcase-shadow);color:var(--showcase-ink);border-radius:17px;font-size:13px;line-height:1.5;overflow:hidden}.showcase-preview button,.showcase-preview input,.showcase-preview select{font:inherit}.showcase-preview button{cursor:pointer}.showcase-preview svg{stroke-width:1.6px;flex:none;width:18px;height:18px}.showcase-preview strong{font-weight:500}.showcase-preview small{color:var(--showcase-muted);margin-top:3px;font-size:11px;display:block}.showcase-preview__origin{border-bottom:1px solid var(--showcase-line);color:var(--showcase-muted);align-items:center;gap:7px;padding:13px 22px;font-size:11px;display:flex}.showcase-preview__origin svg{width:13px;height:13px}.showcase-preview__content{padding:26px}.showcase-preview h3{letter-spacing:-.8px;color:var(--h2-ink);margin:0 0 8px;font-size:25px;font-weight:500;line-height:1.2}.showcase-preview__subtitle{color:var(--showcase-muted);margin:0 0 24px;font-size:13px}.showcase-preview__icon{background:var(--showcase-soft);width:44px;height:44px;color:var(--showcase-ink);border-radius:13px;place-items:center;margin-bottom:20px;display:grid}.showcase-preview__icon svg{width:23px;height:23px}.showcase-preview__primary,.showcase-preview__secondary{border:1px solid var(--showcase-line);border-radius:10px;justify-content:center;align-items:center;gap:10px;width:100%;min-height:44px;padding:11px 14px;font-weight:500;display:flex}.showcase-preview__primary{background:var(--showcase-soft);color:var(--showcase-muted);border-color:var(--showcase-line)}.showcase-preview__primary>svg:last-of-type{width:15px;margin-left:auto}.showcase-preview__primary:active{opacity:.85}.showcase-preview__secondary{background:var(--h2-bg);color:var(--showcase-ink);margin-top:10px}.showcase-preview__option{width:100%;color:inherit;text-align:left;background:0 0;border:0;align-items:center;gap:11px;padding:11px 0;display:flex}.showcase-preview__option>svg:last-child{width:14px;color:var(--showcase-muted);margin-left:auto}.showcase-preview__option-icon{background:var(--showcase-soft);border-radius:9px;flex:none;place-items:center;width:35px;height:35px;display:grid}.showcase-preview__footer{border-top:1px solid var(--showcase-line);background:var(--showcase-soft);color:var(--showcase-muted);align-items:center;gap:6px;padding:14px 22px;font-size:11px;display:flex}.showcase-preview__footer svg{width:13px;height:13px}.showcase-preview__profile{align-items:center;gap:11px;margin-bottom:25px;display:flex}.showcase-preview__avatar{width:42px;height:42px;color:var(--showcase-ink);background:var(--showcase-soft);border-radius:50%;place-items:center;display:grid}.showcase-preview__connected{background:var(--showcase-ink);border-radius:50%;width:7px;height:7px;margin-left:auto}.showcase-preview__section-label{text-transform:uppercase;letter-spacing:1px;color:var(--showcase-muted);margin:24px 0 7px;font-size:11px}.showcase-preview__device{border-bottom:1px solid var(--showcase-line);align-items:center;gap:12px;padding:14px 0;font-size:12px;display:flex}.showcase-preview__device>svg{color:var(--showcase-muted)}.showcase-preview__badge{background:var(--showcase-soft);color:var(--showcase-ink);border-radius:5px;margin-left:auto;padding:3px 6px;font-size:10px}.showcase-preview__feedback{color:var(--showcase-muted);margin:18px 0 26px}.showcase-background__code{border:1px solid var(--showcase-line);color:var(--showcase-muted);font-family:var(--h2-mono);border-radius:9px;margin-bottom:20px;padding:13px}.showcase-background__amount{letter-spacing:-1px;font-size:34px;font-weight:500}.showcase-background__amount small{font-size:15px;display:inline}.showcase-background__details{margin:20px 0}.showcase-background__details>div{border-top:1px solid var(--showcase-line);justify-content:space-between;gap:12px;padding:10px 0;font-size:12px;display:flex}.showcase-background__details dt{color:var(--showcase-muted)}.showcase-background__details dd{margin:0}.showcase-preview__primary,.showcase-preview__secondary,.showcase-preview__option{position:relative}@media (hover:hover) and (pointer:fine){.component-showcase__choice:hover>span,.showcase-preview__secondary:hover{background:var(--showcase-soft)}}.component-showcase[data-motion=keyboard] .component-showcase__world{transition:none}@media (width<=900px){.component-showcase__frame{padding-top:28px}}@media (width<=600px){.component-showcase__selector .component-showcase__choice>span{gap:6px;padding-inline:6px;font-size:11px}.component-showcase__position{width:calc(100vw - 14px)}.component-showcase__position:has(>.showcase-preview__embed){width:calc(100vw + 2px)}.component-showcase__fade{background:linear-gradient(to bottom, var(--h2-bg), var(--h2-bg) 6%, transparent 18%, transparent 93%, var(--h2-bg))}.showcase-preview__content{padding:22px}.showcase-preview h3{font-size:23px}.showcase-preview__footer{padding-inline:18px}}@media (width<=360px){.showcase-preview__content{padding:18px}}@media (prefers-reduced-motion:reduce){.component-showcase__world{transition:none}.component-showcase__position{transition-duration:.15s}}.component-showcase__playback{background:var(--showcase-soft);width:34px;height:34px;color:var(--showcase-ink);cursor:pointer;border:0;border-radius:9999px;flex:none;place-items:center;padding:0;display:grid;position:relative}.component-showcase__playback svg{fill:none;stroke-width:1.5px;width:15px;height:15px}.component-showcase__playback:focus-visible{outline:2px solid var(--showcase-ink);outline-offset:2px}@media (hover:hover) and (pointer:fine){.component-showcase__playback:hover{background:var(--showcase-line)}}@media (pointer:coarse){.component-showcase__playback:after{content:"";position:absolute;inset:-5px}.component-showcase__choice>span{min-height:40px}}