.ws-demo-frame{--du:calc(100cqw / 1239);overflow:clip}.ws-demo-frame-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,4vw,64px);display:grid}.ws-demo-frame-player{align-items:flex-start;gap:var(--space-16);flex-direction:column;min-width:0;display:flex}.ws-demo-frame-media{align-self:stretch;min-width:0;position:relative}.ws-demo-frame-copy{flex-direction:column;align-items:flex-start;gap:20px;min-width:0;padding-right:clamp(0px,2vw,36px);display:flex}.ws-demo-frame-copy h2{max-width:16ch;font-size:var(--t-h2);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls);font-weight:var(--t-h2-weight);margin:0}.ws-demo-frame-copy p{max-width:44ch;font-size:var(--t-lead);line-height:var(--t-lead-lh);color:var(--sys-text-body-inverse);margin:0}.ws-demo-frame-copy .ws-btn-secondary{margin-top:var(--space-12)}.ws-demo-frame-scene{aspect-ratio:1239/694;border-radius:var(--radius-14);box-shadow:0 24px 48px -24px var(--alpha-black-60);background:0 0;position:relative;overflow:hidden;container-type:inline-size}.ws-demo-frame-app{--du:calc(100cqw / 1239);background:var(--sys-surface-raised);width:100%;height:100%;color:var(--sys-text-strong);font-size:calc(14 * var(--du));-webkit-font-smoothing:antialiased;line-height:1.35;display:flex;overflow:hidden}.ws-demo-frame-side{width:calc(50.794 * var(--du));background:var(--sys-surface-inverse);color:var(--alpha-white-72);flex-direction:column;flex:none;display:flex}.ws-demo-frame-side .ws-ic{width:calc(21.769 * var(--du));height:calc(21.769 * var(--du))}.ws-demo-frame-nh,.ws-demo-frame-ni{place-items:center;display:grid}.ws-demo-frame-nh{height:calc(50.794 * var(--du))}.ws-demo-frame-nc{padding:calc(3.628 * var(--du)) 0}.ws-demo-frame-ng{padding-top:calc(7.256 * var(--du));flex:1}.ws-demo-frame-ni{height:calc(36.281 * var(--du));background:var(--sys-surface-inverse);position:relative}.ws-demo-frame-ni .ws-ic{width:calc(19.745 * var(--du));height:calc(19.745 * var(--du))}.ws-demo-frame-ni.is-on{background:var(--alpha-white-16)}.ws-demo-frame-ni.is-on:before{content:"";width:calc(1.814 * var(--du));background:var(--sys-action-primary);position:absolute;inset:0 auto 0 0}.ws-demo-frame-ns{height:calc(50.794 * var(--du));border-top:1px solid var(--alpha-white-14)}.ws-demo-frame-main{flex-direction:column;flex:1;min-width:0;display:flex}.ws-demo-frame-txn{grid-template-columns:calc(236 * var(--du)) minmax(0, 1fr) minmax(0, 1fr);grid-template-rows:calc(56 * var(--du)) minmax(0, 1fr) calc(58 * var(--du));flex:1;min-height:0;display:grid}.ws-demo-frame-list{padding:calc(14 * var(--du)) calc(10 * var(--du));border-right:1px solid var(--sys-border-subtle);grid-row:1/4;overflow:hidden}.ws-demo-frame-back{align-items:center;gap:calc(10 * var(--du));padding:calc(4 * var(--du)) calc(8 * var(--du)) calc(14 * var(--du));color:var(--sys-text-brand);font-size:calc(14.5 * var(--du));display:flex}.ws-demo-frame-back svg{width:calc(16 * var(--du));height:calc(16 * var(--du));flex:none}.ws-demo-frame-day{padding:calc(6 * var(--du)) calc(8 * var(--du));color:var(--sys-text-muted);font-size:calc(12 * var(--du))}.ws-demo-frame-li{grid-template-columns:calc(26 * var(--du)) minmax(0, 1fr) calc(16 * var(--du));gap:calc(10 * var(--du));padding:calc(12 * var(--du)) calc(8 * var(--du));border-bottom:1px solid var(--sys-border-subtle);border-radius:calc(8 * var(--du));align-items:center;display:grid}.ws-demo-frame-li.is-on{background:var(--sys-surface-brand-subtle);border-color:#0000}.ws-demo-frame-li-copy{min-width:0}.ws-demo-frame-n{font-size:calc(13.5 * var(--du));text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ws-demo-frame-a{margin-top:calc(2 * var(--du));font-size:calc(13.5 * var(--du));font-variant-numeric:tabular-nums;font-weight:600}.ws-demo-frame-mark{width:calc(26 * var(--du));height:calc(26 * var(--du));border-radius:var(--radius-round);flex:none;place-items:center;display:grid}.ws-demo-frame-mark svg{width:calc(14 * var(--du));height:calc(14 * var(--du))}.ws-demo-frame-mark.is-coral{background:var(--clr-salmon-terracotta-red);color:var(--sys-text-inverse)}.ws-demo-frame-mark.is-midnight{background:var(--sys-surface-inverse);color:var(--sys-text-inverse)}.ws-demo-frame-mark.is-blue{background:var(--sys-surface-brand);color:var(--sys-text-inverse)}.ws-demo-frame-mark.is-green{background:var(--clr-green-grass-dark-emerald-green);color:var(--sys-text-inverse)}.ws-demo-frame-mark.is-soft{background:var(--sys-surface-subtle);color:var(--sys-text-strong)}.ws-demo-frame-ic{width:calc(16 * var(--du));height:calc(16 * var(--du));color:var(--sys-text-muted)}.ws-demo-frame-li.is-on .ws-demo-frame-ic{color:var(--sys-text-brand)}.ws-demo-frame-txh{justify-content:space-between;align-items:center;gap:calc(12 * var(--du));padding:0 calc(22 * var(--du));border-bottom:1px solid var(--sys-border-subtle);font-size:calc(18 * var(--du));grid-column:2/4;font-weight:600;display:flex}.ws-demo-frame-txh-l{align-items:center;gap:calc(10 * var(--du));min-width:0;display:flex}.ws-demo-frame-txh-l .ws-ic{width:calc(24 * var(--du));height:calc(24 * var(--du))}.ws-demo-frame-close{color:var(--sys-text-muted);font-size:calc(20 * var(--du));font-weight:400}.ws-demo-frame-det{min-width:0;padding:calc(18 * var(--du)) calc(20 * var(--du));border-right:1px solid var(--sys-border-subtle);overflow:hidden}.ws-demo-frame-pill{height:calc(22 * var(--du));padding:0 calc(10 * var(--du));border:1px solid color-mix(in srgb, var(--sys-border-brand) 28%, transparent);border-radius:var(--radius-pill);background:var(--sys-surface-brand-subtle);color:var(--sys-text-brand);font-size:calc(11.5 * var(--du));white-space:nowrap;align-items:center;font-weight:500;display:inline-flex}.ws-demo-frame-m{align-items:center;gap:calc(8 * var(--du));margin-top:calc(16 * var(--du));font-size:calc(15 * var(--du));letter-spacing:.02em;font-weight:600;display:flex}.ws-demo-frame-big{margin-top:calc(6 * var(--du));font-size:calc(30 * var(--du));font-variant-numeric:tabular-nums;font-weight:600}.ws-demo-frame-meta{justify-content:space-between;gap:calc(12 * var(--du));margin-top:calc(8 * var(--du));color:var(--sys-text-muted);font-size:calc(13 * var(--du));display:flex}.ws-demo-frame-more{color:var(--sys-text-brand)}.ws-demo-frame-ban{align-items:center;gap:calc(10 * var(--du));height:calc(38 * var(--du));margin-top:calc(14 * var(--du));padding:0 calc(12 * var(--du));border-radius:calc(8 * var(--du));background:var(--clr-salmon-pale-rose);font-size:calc(13.5 * var(--du));display:flex}.ws-demo-frame-ban svg{width:calc(16 * var(--du));height:calc(16 * var(--du));color:var(--sys-status-error);flex:none}.ws-demo-frame-ban b{color:var(--sys-status-error);font-weight:600}.ws-demo-frame-tabs{gap:calc(22 * var(--du));margin-top:calc(16 * var(--du));border-bottom:1px solid var(--sys-border-subtle);color:var(--sys-text-muted);font-size:calc(14 * var(--du));display:flex}.ws-demo-frame-tabs span{padding:calc(8 * var(--du)) 0}.ws-demo-frame-tabs .is-on{border-bottom:2px solid var(--sys-border-brand);color:var(--sys-text-brand);font-weight:500}.ws-demo-frame-field{justify-content:space-between;align-items:center;gap:calc(8 * var(--du));height:calc(44 * var(--du));margin-top:calc(16 * var(--du));padding:0 calc(12 * var(--du));border:1px solid var(--sys-border-default);border-radius:calc(8 * var(--du));font-size:calc(14.5 * var(--du));display:flex;position:relative}.ws-demo-frame-label{top:calc(-8 * var(--du));left:calc(10 * var(--du));padding:0 calc(4 * var(--du));background:var(--sys-surface-raised);color:var(--sys-text-muted);font-size:calc(11.5 * var(--du));position:absolute}.ws-demo-frame-value{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.ws-demo-frame-value.is-muted,.ws-demo-frame-muted{color:var(--sys-text-muted)}.ws-demo-frame-desc{height:calc(74 * var(--du));padding-top:calc(12 * var(--du));align-items:flex-start}.ws-demo-frame-more{align-items:center;gap:calc(4 * var(--du));display:inline-flex}.ws-demo-frame-more svg,.ws-demo-frame-field svg,.ws-demo-frame-btn svg{width:calc(12 * var(--du));height:calc(12 * var(--du));flex:none}.ws-demo-frame-group{margin-top:calc(18 * var(--du));flex-direction:column;display:flex}.ws-demo-frame-group>b{color:var(--sys-text-strong);font-size:calc(15 * var(--du));font-weight:600}.ws-demo-frame-help{margin-top:calc(4 * var(--du));color:var(--sys-text-body);font-size:calc(12.5 * var(--du))}.ws-demo-frame-group .ws-demo-frame-field{margin-top:calc(10 * var(--du));height:calc(38 * var(--du))}.ws-demo-frame-group .ws-demo-frame-desc{height:calc(64 * var(--du))}.ws-demo-frame-count{margin-top:calc(4 * var(--du));color:var(--sys-text-muted);font-size:calc(10.5 * var(--du));align-self:flex-end}.ws-demo-frame-drop{justify-content:center;align-items:center;gap:calc(6 * var(--du));margin:calc(16 * var(--du));border:calc(1.5 * var(--du)) dashed var(--sys-border-default);border-radius:calc(10 * var(--du));background:var(--sys-surface-subtle);color:var(--sys-text-body);font-size:calc(13 * var(--du));text-align:center;animation:ws-demo-frame-fade .3s var(--sys-ease-out) both;flex-direction:column;flex:1;display:flex}.ws-demo-frame-drop svg{width:calc(28 * var(--du));height:calc(28 * var(--du));color:var(--sys-text-brand)}.ws-demo-frame-drop b{margin-top:calc(4 * var(--du));color:var(--sys-text-strong);font-size:calc(17 * var(--du));font-weight:600}.ws-demo-frame-drop .ws-demo-frame-btn{margin-top:calc(10 * var(--du))}.ws-demo-frame-pane{flex-direction:column;min-width:0;min-height:0;display:flex}.ws-demo-frame-ph{padding:calc(16 * var(--du)) calc(18 * var(--du)) calc(10 * var(--du))}.ws-demo-frame-ph b{justify-content:space-between;gap:calc(8 * var(--du));font-size:calc(15 * var(--du));display:flex}.ws-demo-frame-ph b span{color:var(--sys-text-brand);font-weight:500}.ws-demo-frame-verified{align-items:center;gap:calc(6 * var(--du));margin-top:calc(8 * var(--du));color:var(--sys-text-strong);font-size:calc(12.5 * var(--du));text-underline-offset:2px;text-decoration:underline;display:flex}.ws-demo-frame-verified svg{width:calc(14 * var(--du));height:calc(14 * var(--du));color:var(--clr-green-grass-flag-green);flex:none}.ws-demo-frame-pb{border-top:1px solid var(--sys-border-subtle);background:var(--sys-surface-subtle);flex:1;place-items:center;min-height:0;display:grid}.ws-demo-frame-paper{width:calc(262 * var(--du));height:calc(258 * var(--du));border-radius:calc(10 * var(--du));background:var(--sys-surface-raised);box-shadow:0 0 0 1px var(--sys-border-default), 0 8px 20px var(--alpha-black-08);overflow:hidden;container-type:inline-size}.ws-demo-frame-pf{height:calc(44 * var(--du));border-top:1px solid var(--sys-border-subtle);font-size:calc(13.5 * var(--du));align-items:center;display:flex}.ws-demo-frame-up{height:100%;padding:0 calc(14 * var(--du));border-right:1px solid var(--sys-border-subtle);color:var(--sys-text-brand);align-items:center;font-weight:600;display:flex}.ws-demo-frame-file{align-items:center;gap:calc(8 * var(--du));height:100%;padding:0 calc(12 * var(--du));border-bottom:2px solid var(--sys-border-brand);color:var(--sys-text-brand);display:flex}.ws-demo-frame-actions{justify-content:flex-end;align-items:center;gap:calc(12 * var(--du));padding:0 calc(18 * var(--du));border-top:1px solid var(--sys-border-subtle);grid-column:2/4;display:flex}.ws-demo-frame-btn{align-items:center;gap:calc(8 * var(--du));height:calc(36 * var(--du));padding:0 calc(16 * var(--du));border:1px solid var(--sys-border-brand);border-radius:calc(8 * var(--du));background:var(--sys-surface-raised);color:var(--sys-text-brand);font-size:calc(14 * var(--du));white-space:nowrap;font-weight:500;display:inline-flex}.ws-demo-frame-btn.is-solid{border-color:var(--sys-surface-brand);background:var(--sys-surface-brand);color:var(--sys-text-inverse)}.ws-demo-frame-kbd{padding:0 calc(4 * var(--du));border:1px solid var(--alpha-white-55);border-radius:calc(4 * var(--du));font-size:calc(11 * var(--du))}.ws-demo-frame-doc{background:var(--sys-surface-raised);width:100%;height:100%;color:var(--sys-text-strong);padding:5cqw 5.5cqw;font-size:1.75cqw;line-height:1.35;overflow:hidden}.ws-demo-frame-doc-hd{grid-template-columns:1fr 1fr;gap:0 5cqw;display:grid}.ws-demo-frame-doc-kv{grid-template-columns:42% 1fr;gap:1cqw;margin-bottom:.6cqw;display:grid}.ws-demo-frame-doc-kv b{font-weight:700}.ws-demo-frame-doc-h{margin:3cqw 0 1.4cqw;font-size:2.3cqw;font-weight:700}.ws-demo-frame-doc-table{border-collapse:collapse;width:100%;font-size:1.45cqw}.ws-demo-frame-doc-table th{background:var(--sys-surface-subtle);text-align:left;padding:.6cqw .8cqw;font-weight:700}.ws-demo-frame-doc-table td{border-bottom:1px solid var(--sys-border-subtle);padding:.6cqw .8cqw}.ws-demo-frame-doc-tot{grid-template-columns:1fr 1fr;gap:5cqw;margin-top:3cqw;display:grid}.ws-demo-frame-doc-rt{grid-template-columns:1fr auto;gap:.4cqw 2cqw;display:grid}.ws-demo-frame-doc-rt .is-total{font-weight:700}.ws-demo-frame-doc-seal{margin-top:2.6cqw}.ws-demo-frame-doc-seal b{font-weight:700;display:block}.ws-demo-frame-doc-seal i{background:var(--sys-border-default);border-radius:1px;height:1cqw;margin:.7cqw 0;display:block}.ws-demo-frame-doc-seal i.is-w92{width:92%}.ws-demo-frame-doc-seal i.is-w96{width:96%}.ws-demo-frame-doc-seal i.is-w88{width:88%}.ws-demo-frame-doc-seal i.is-w80{width:80%}.ws-demo-frame-doc-seal i.is-w60{width:60%}.ws-demo-frame-doc-foot{grid-template-columns:20cqw 1fr;align-items:start;gap:3cqw;margin-top:2.6cqw;display:grid}.ws-demo-frame-doc-qr{width:20cqw;height:20cqw;fill:var(--sys-text-strong)}.ws-demo-frame-li{width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color var(--sys-dur-hover) var(--sys-ease-out);background:0 0;border-top:0;border-left:0;border-right:0;margin:0}.ws-demo-frame-li-copy,.ws-demo-frame-n,.ws-demo-frame-a{display:block}@media (hover:hover){.ws-demo-frame-li:not(.is-on):hover{background:var(--sys-surface-subtle)}.ws-demo-frame-btn.is-solid:not(.is-ok):hover{background:var(--clr-blue-vivid-azure);border-color:var(--clr-blue-vivid-azure)}}.ws-demo-frame-li:focus-visible,.ws-demo-frame-btn:focus-visible{outline:var(--sys-focus-width) solid var(--sys-border-brand);outline-offset:calc(-1 * var(--sys-focus-width))}.ws-demo-frame-li.is-ok .ws-demo-frame-ic{color:var(--clr-green-grass-dark-emerald-green)}button.ws-demo-frame-btn{font:inherit;font-size:calc(14 * var(--du));cursor:pointer;transition:background-color var(--sys-dur-hover) var(--sys-ease-out), border-color var(--sys-dur-hover) var(--sys-ease-out);position:relative}.ws-demo-frame-btn.is-ok{border-color:var(--clr-green-grass-dark-emerald-green);background:var(--clr-green-grass-dark-emerald-green);cursor:default}.ws-demo-frame-pill.is-ok{border-color:color-mix(in srgb, var(--clr-green-grass-dark-emerald-green) 30%, transparent);background:color-mix(in srgb, var(--clr-green-grass-flag-green) 14%, var(--sys-surface-raised));color:var(--clr-green-grass-dark-emerald-green)}button.ws-demo-frame-btn:after{content:"";width:max(100%,44px);height:max(100%,44px);position:absolute;top:50%;left:50%;translate:-50% -50%}.ws-demo-frame-det{animation:ws-demo-frame-fade .3s var(--sys-ease-out) both}.ws-demo-frame-hint{align-items:center;gap:var(--space-8);color:var(--sys-text-muted-inverse);font-size:var(--t-14);line-height:var(--t-14-lh);margin:0;display:inline-flex}@keyframes ws-demo-frame-rise{0%{opacity:0;transform:translateY(calc(40 * var(--du)))}to{opacity:1;transform:none}}@keyframes ws-demo-frame-slide{0%{opacity:0;transform:translateX(calc(-14 * var(--du)))}to{opacity:1;transform:none}}@keyframes ws-demo-frame-up{0%{opacity:0;transform:translateY(calc(10 * var(--du)))}to{opacity:1;transform:none}}@keyframes ws-demo-frame-fade{0%{opacity:0}to{opacity:1}}.ws-demo-frame-scene.is-playing .ws-demo-frame-app{animation:ws-demo-frame-rise .9s var(--lp-out) .3s both}.ws-demo-frame-scene.is-playing .ws-demo-frame-li{animation:ws-demo-frame-slide .4s var(--lp-out) both}.ws-demo-frame-scene.is-playing .ws-demo-frame-li:nth-child(3){animation-delay:.6s}.ws-demo-frame-scene.is-playing .ws-demo-frame-li:nth-child(4){animation-delay:.65s}.ws-demo-frame-scene.is-playing .ws-demo-frame-li:nth-child(5){animation-delay:.7s}.ws-demo-frame-scene.is-playing .ws-demo-frame-li:nth-child(6){animation-delay:.75s}.ws-demo-frame-scene.is-playing .ws-demo-frame-li:nth-child(8){animation-delay:.8s}.ws-demo-frame-scene.is-playing .ws-demo-frame-li:nth-child(9){animation-delay:.85s}.ws-demo-frame-scene.is-playing .ws-demo-frame-det>*{animation:ws-demo-frame-up .4s var(--lp-out) both}.ws-demo-frame-scene.is-playing .ws-demo-frame-det>:first-child{animation-delay:.7s}.ws-demo-frame-scene.is-playing .ws-demo-frame-det>:nth-child(2){animation-delay:.75s}.ws-demo-frame-scene.is-playing .ws-demo-frame-det>:nth-child(3){animation-delay:.8s}.ws-demo-frame-scene.is-playing .ws-demo-frame-det>:nth-child(4){animation-delay:.85s}.ws-demo-frame-scene.is-playing .ws-demo-frame-det>:nth-child(5){animation-delay:.9s}.ws-demo-frame-scene.is-playing .ws-demo-frame-det>:nth-child(6){animation-delay:.95s}.ws-demo-frame-scene.is-playing .ws-demo-frame-det>:nth-child(7){animation-delay:1s}.ws-demo-frame-scene.is-playing .ws-demo-frame-det>:nth-child(8){animation-delay:1.05s}.ws-demo-frame-scene.is-playing .ws-demo-frame-det>:nth-child(9){animation-delay:1.1s}.ws-demo-frame-scene.is-playing .ws-demo-frame-det>:nth-child(10){animation-delay:1.15s}.ws-demo-frame-scene.is-playing .ws-demo-frame-pane{animation:ws-demo-frame-fade .6s var(--lp-out) .9s both}@media (prefers-reduced-motion:reduce){.ws-demo-frame-scene.is-playing .ws-demo-frame-app,.ws-demo-frame-scene.is-playing .ws-demo-frame-li,.ws-demo-frame-scene.is-playing .ws-demo-frame-det>*,.ws-demo-frame-scene.is-playing .ws-demo-frame-pane{animation:none}.ws-demo-frame-det,.ws-demo-frame-li,button.ws-demo-frame-btn{transition:none;animation:none}}@media (width<=900px){.ws-demo-frame-grid{grid-template-columns:minmax(0,1fr);gap:40px}.ws-demo-frame-copy{padding-right:0}.ws-demo-frame-copy h2{max-width:none}}@media (width<=560px){.ws-demo-frame-scene{border-radius:var(--radius-10)}}