.bg-demo{--demo-line:color-mix(in srgb, var(--text) 15%, transparent);--demo-soft:color-mix(in srgb, var(--surface) 88%, var(--bg));--demo-highlight:color-mix(in srgb, var(--gold) 9%, var(--surface));border:1px solid var(--demo-line);background:var(--demo-soft);min-width:0;color:var(--text);font-family:var(--body-font);isolation:isolate;border-radius:1rem;margin-block:1.5rem;padding:clamp(1.1rem,3.2vw,2.5rem);font-weight:400;line-height:1.55;position:relative}.bg-demo:before{content:"";background:var(--gold);pointer-events:none;border-radius:2px;width:min(20%,8rem);height:2px;position:absolute;inset:-1px auto auto 2.5rem}.bg-demo *,.bg-demo :before,.bg-demo :after{box-sizing:border-box}.bg-demo p{margin:0 0 1rem}.bg-demo strong,.bg-demo b{font-weight:400}.bg-demo h3,.bg-demo h4{font-family:var(--heading-font);text-wrap:balance;margin:0;font-weight:600;line-height:1.25}.bg-demo h3{font-size:clamp(1.5rem,2.1vw,2rem)}.bg-demo h4{margin-bottom:.85rem;font-size:clamp(1.15rem,1.55vw,1.5rem)}.bg-demo button,.bg-demo input,.bg-demo select{font:inherit}.bg-demo button{cursor:pointer}.bg-demo button:disabled{cursor:default}.bg-demo button:focus-visible,.bg-demo a:focus-visible,.bg-demo input:focus-visible,.bg-demo select:focus-visible,.bg-demo [tabindex="0"]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.bg-demo .bg-demo-icon{width:1.35rem;height:1.35rem;color:var(--gold);flex:none}.bg-demo .bg-demo-header{max-width:58rem;margin-bottom:1.75rem}.bg-demo .bg-demo-header h3{margin-bottom:.8rem}.bg-demo .bg-demo-header>p:last-child{color:var(--muted);max-width:52rem}.bg-demo .bg-demo-kicker{color:var(--gold);letter-spacing:.095em;text-transform:uppercase;margin:0 0 .65rem;font-size:.73rem;font-weight:400;line-height:1.45}.bg-demo .bg-demo-note{max-width:43rem;color:var(--muted);margin:.8rem 0 0;font-size:.77rem;line-height:1.5}.bg-demo .bg-demo-small{color:var(--muted);font-size:.83rem;line-height:1.55}.bg-demo .bg-demo-status{border:1px solid color-mix(in srgb, var(--teal) 45%, transparent);background:color-mix(in srgb, var(--teal) 7%, transparent);max-width:100%;color:var(--text);border-radius:.35rem;align-items:center;gap:.45rem;padding:.3rem .6rem;font-size:.77rem;line-height:1.4;display:inline-flex}.bg-demo .bg-demo-status>span{background:var(--teal);border-radius:50%;flex:none;width:.4rem;height:.4rem}.bg-demo .bg-demo-status--pending,.bg-demo .bg-demo-status--warning{border-color:color-mix(in srgb, var(--gold) 45%, transparent);background:color-mix(in srgb, var(--gold) 7%, transparent)}.bg-demo .bg-demo-status--pending>span,.bg-demo .bg-demo-status--warning>span{background:var(--gold)}.bg-demo .bg-demo-status--warning>span{border-radius:1px;transform:rotate(45deg)}.bg-demo .bg-demo-topline{justify-content:space-between;align-items:end;gap:1.5rem;margin-bottom:1.8rem;display:flex}.bg-demo .bg-demo-topline>.bg-demo-note{max-width:22rem;margin:0}.bg-demo fieldset{min-width:0;margin:0}.bg-demo legend{padding:0}.bg-demo .bg-demo-result{border:1px solid var(--demo-line);background:color-mix(in srgb, var(--bg) 60%, var(--surface));border-radius:.65rem;min-width:0;min-height:19rem;padding:clamp(1rem,2vw,1.55rem)}.bg-demo .bg-demo-result>p:last-child{margin-bottom:0}.bg-demo .bg-demo-document-top{flex-wrap:wrap;align-items:center;gap:.8rem;margin-bottom:1.3rem;font-size:.85rem;display:flex}.bg-demo .bg-demo-document-top .bg-demo-status{margin-left:auto}.bg-demo .bg-demo-receipt{margin:0}.bg-demo .bg-demo-receipt>div{border-bottom:1px solid var(--demo-line);justify-content:space-between;gap:1rem;padding:.75rem 0;font-size:.83rem;display:flex}.bg-demo .bg-demo-receipt dd{text-align:right;font-variant-numeric:tabular-nums;margin:0}.bg-demo .bg-demo-sum{color:var(--gold);font-weight:400}.bg-demo .bg-demo-receipt+p{margin-top:1rem}.bg-demo .bg-demo-state-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:1.2rem 0;display:grid}.bg-demo .bg-demo-state-grid>div{border:1px solid var(--demo-line);border-radius:.4rem;flex-direction:column;align-items:start;gap:.6rem;min-width:0;padding:.9rem .7rem;display:flex}.bg-demo .bg-demo-state-grid>div>span:first-child{color:var(--muted);font-size:.8rem}.bg-demo .bg-demo-footer{border-top:1px solid var(--demo-line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.7rem 1.5rem;margin-top:1.6rem;padding-top:1rem;display:flex}.bg-demo .bg-demo-footer>div{color:var(--muted);font-size:.8rem}.bg-demo .bg-demo-footer .bg-demo-note{margin:0}.bg-demo .bg-demo-next{min-height:2.75rem;color:var(--gold);text-align:left;background:0 0;border:1px solid #0000;border-radius:.25rem;justify-content:center;align-items:center;gap:.65rem;padding:.5rem .15rem;font-size:.85rem;display:inline-flex}.bg-demo .bg-demo-next:hover{text-underline-offset:.25rem;text-decoration:underline}.bg-demo .bg-demo-primary{border:1px solid var(--gold);background:var(--gold);min-height:2.85rem;color:var(--bg);border-radius:.4rem;justify-content:center;align-items:center;gap:.7rem;padding:.75rem 1.1rem;font-size:.85rem;font-weight:400;display:inline-flex}.bg-demo .bg-demo-primary>.bg-demo-icon{color:currentColor}.bg-demo .bg-demo-primary:disabled{background:var(--demo-highlight);color:var(--gold)}.bg-demo .bg-demo-empty{border:1px dashed var(--demo-line);min-width:0;color:var(--muted);border-radius:.5rem;padding:1.5rem}.bg-demo .bg-demo-empty>p:last-child{margin-bottom:0}.bg-demo.bg-demo-compact{padding:1.25rem}@media (width<=900px){.bg-demo .bg-demo-topline{flex-direction:column;align-items:start;gap:1rem}.bg-demo .bg-demo-topline>.bg-demo-note{max-width:none}.bg-demo .bg-demo-state-grid{grid-template-columns:1fr}.bg-demo .bg-demo-state-grid>div{flex-direction:row;justify-content:space-between;align-items:center}.bg-demo .bg-demo-state-grid .bg-demo-status{max-width:72%}}@media (width<=640px){.bg-demo{border-radius:.7rem;padding:1.05rem}.bg-demo:before{left:1.05rem}.bg-demo .bg-demo-header{margin-bottom:1.4rem}.bg-demo .bg-demo-header h3{font-size:1.45rem}.bg-demo .bg-demo-header>p:last-child{font-size:.87rem}.bg-demo .bg-demo-result{min-height:0;padding:1rem}.bg-demo .bg-demo-footer{gap:.45rem 1rem}.bg-demo .bg-demo-footer .bg-demo-next{justify-content:space-between;max-width:100%;font-size:.8rem}}@media (prefers-reduced-motion:reduce){.bg-demo *,.bg-demo :before,.bg-demo :after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.bg-demo .bg-demo-radio-pills{border:0;flex-wrap:wrap;gap:.45rem;padding:0;display:flex}.bg-demo .bg-demo-radio-pills>legend{color:var(--muted);margin-bottom:.7rem;font-size:.8rem}.bg-demo .bg-demo-radio-pills>label{border:1px solid var(--demo-line);background:var(--bg);cursor:pointer;border-radius:.4rem;align-items:center;gap:.5rem;min-height:2.75rem;padding:.6rem 1rem;font-size:.88rem;transition:background-color .15s,border-color .15s;display:inline-flex;position:relative}.bg-demo input[type=radio],.bg-demo input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--gold);cursor:pointer;flex:none;margin:0}.bg-demo .bg-demo-radio-pills>label.is-selected{border-color:var(--gold);background:var(--demo-highlight)}.bg-demo .bg-demo-radio-pills>label:focus-within{outline:2px solid var(--gold);outline-offset:3px}.bg-demo .bg-demo-steps{grid-template-columns:repeat(var(--demo-steps), minmax(0, 1fr));border:0;border-bottom:1px solid var(--demo-line);width:100%;height:auto;box-shadow:none;background:0 0;border-radius:0;align-items:stretch;gap:.4rem;margin:0 0 1.75rem;padding:0 0 1.5rem;display:grid}.bg-demo .bg-demo-step{min-width:0;min-height:4.65rem;color:var(--muted);white-space:normal;text-align:center;box-shadow:none;background:0 0;border:1px solid #0000;border-radius:.45rem;flex-direction:column;justify-content:start;align-items:center;gap:.65rem;margin:0;padding:.35rem .35rem .5rem;font-size:.78rem;font-weight:400;line-height:1.4;display:flex;position:relative}.bg-demo .bg-demo-step:before{content:"";z-index:-1;background:var(--demo-line);width:calc(100% + .4rem);height:1px;position:absolute;top:1.35rem;left:calc(-50% - .2rem)}.bg-demo .bg-demo-step:first-child:before{display:none}.bg-demo .bg-demo-step-number{border:1px solid var(--demo-line);background:var(--surface);width:2.05rem;height:2.05rem;color:var(--muted);font-variant-numeric:tabular-nums;border-radius:50%;flex:none;place-items:center;font-size:.76rem;display:grid}.bg-demo .bg-demo-step[data-state=active]{color:var(--gold);box-shadow:none;background:0 0}.bg-demo .bg-demo-step[data-state=active] .bg-demo-step-number{border-color:var(--gold);background:var(--gold);color:var(--bg)}.bg-demo .bg-demo-step:hover,.bg-demo .bg-demo-pills>button:hover{border-color:var(--demo-line);color:var(--text)}.bg-demo .bg-demo-tab-panel{outline-offset:5px;min-width:0;margin:0;padding:0}.bg-demo .bg-demo-pills{background:0 0;border:0;border-radius:0;flex-wrap:wrap;align-items:stretch;gap:.45rem;width:fit-content;max-width:100%;height:auto;margin:1.5rem 0;padding:0;display:flex}.bg-demo .bg-demo-pills>button{border:1px solid var(--demo-line);background:var(--bg);min-height:2.75rem;color:var(--muted);white-space:normal;box-shadow:none;border-radius:.4rem;padding:.6rem .95rem;font-size:.83rem}.bg-demo .bg-demo-pills>button[data-state=active]{border-color:var(--gold);background:var(--demo-highlight);color:var(--gold)}.bg-demo .bg-demo-select-label{color:var(--muted);flex-wrap:wrap;align-items:center;gap:.65rem 1rem;font-size:.8rem;display:flex}.bg-demo .bg-demo-select-label select{border:1px solid var(--demo-line);background:var(--bg);width:auto;max-width:100%;min-height:2.75rem;color:var(--text);color-scheme:dark;border-radius:.35rem;padding:.6rem 2.25rem .6rem .8rem}@media (width<=640px){.bg-demo .bg-demo-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem .25rem;margin-bottom:1.3rem;padding-bottom:1rem}.bg-demo .bg-demo-step{gap:.4rem;min-height:4.65rem;padding:.3rem .2rem;font-size:.72rem}.bg-demo .bg-demo-step:before{display:none}.bg-demo .bg-demo-step[data-state=active]{border-color:color-mix(in srgb, var(--gold) 45%, transparent);background:var(--demo-highlight)}.bg-demo .bg-demo-step-number{width:1.75rem;height:1.75rem;font-size:.7rem}.bg-demo .bg-demo-radio-pills{gap:.35rem}.bg-demo .bg-demo-radio-pills>label{flex:auto;justify-content:center;padding:.55rem .65rem;font-size:.8rem}.bg-demo .bg-demo-pills{width:100%;margin:1.2rem 0}.bg-demo .bg-demo-pills>button{flex:7rem;padding:.55rem .7rem;font-size:.78rem}.bg-demo .bg-demo-select-label{flex-direction:column;align-items:stretch;width:100%}.bg-demo .bg-demo-select-label select{width:100%}}