.example-demo{--example-mint:light-dark(#b8d7c0,#b0d4bd);--example-yellow:light-dark(#f0d67d,#e8cc71);--example-inset:clamp(1rem, 4cqi, 2rem);color:var(--sl-color-text);border:1px solid var(--st-line);background:var(--sl-color-bg);border-radius:1rem;margin-block:2rem 2.5rem;overflow:hidden;container:example/inline-size}.example-invitation{padding:var(--example-inset);justify-content:space-between;align-items:center;gap:1.5rem;display:flex}.example-invitation h2{letter-spacing:-.035em;text-wrap:balance;color:var(--sl-color-white);margin:0 0 .65rem;font-size:clamp(1.45rem,4cqi,2rem);line-height:1.2}.example-invitation p{color:var(--sl-color-gray-2);max-width:30rem;margin:0;font-size:.9rem;line-height:1.5}.example-demo button{font:inherit;cursor:pointer;touch-action:manipulation}.example-demo button:disabled{opacity:.5;cursor:default}.example-demo .example-primary{background:var(--example-yellow);color:#352344;min-height:44px;box-shadow:3px 3px 0 var(--sl-color-accent-low);border:1.5px solid #352344;border-radius:.6rem;flex-shrink:0;justify-content:center;align-items:center;gap:.7rem;padding:.75rem 1rem;font-size:.9rem;font-weight:600;display:inline-flex}.example-primary svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:1.15rem;height:1.15rem}.example-primary:not(:disabled):hover{background:color-mix(in srgb, var(--example-yellow), white 10%)}.example-sharing{padding:1.25rem var(--example-inset);border-top:1px solid var(--st-line);background:var(--st-raised);flex-wrap:wrap;align-items:center;gap:.75rem 1rem;display:flex}.example-proof{flex:16rem;min-width:0}.example-proof-numbers{font-variant-numeric:tabular-nums;color:var(--sl-color-white);align-items:center;gap:.75rem;font-size:clamp(1.1rem,3.3cqi,1.6rem);display:flex}.example-proof-numbers strong{font-weight:500}.example-proof-numbers strong:last-child{color:var(--sl-color-accent-high)}.example-demo[data-proven=true] .example-proof-numbers strong:last-child{color:light-dark(#416c50,#b0d4bd)}.example-proof-join{color:var(--sl-color-gray-3);fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:1.2rem;height:1.2rem}.example-proof p{color:var(--sl-color-gray-2);min-height:1.5em;margin:.4rem 0 0;font-size:.85rem;line-height:1.5}.example-controls{background:var(--st-raised);flex-flow:column wrap;justify-content:space-between;align-items:flex-end;gap:.25rem 1rem;padding:0;display:flex}.example-controls button,.example-error button{min-height:44px;color:var(--sl-color-accent-high);text-underline-offset:.25em;background:0 0;border:0;padding:.5rem 0;font-size:.8rem;text-decoration:underline}.example-execution{color:var(--sl-color-gray-2);align-items:center;gap:.5rem;font-size:.8rem;display:inline-flex}.example-status-dot,.example-flow-tab i{background:var(--sl-color-gray-4);border-radius:50%;flex:none;width:.4rem;height:.4rem}.example-status-dot.is-live,.example-flow-tab i.is-live{background:light-dark(#477554,#a8cfae)}.example-flow{max-width:32rem;color:var(--sl-color-gray-2);flex:100%;align-items:center;padding-top:.5rem;font-size:.8rem;display:flex}.example-flow[data-pending=true]{opacity:.6}.example-flow-origin{flex:1;align-items:center;min-width:0;display:flex}.example-flow-source{flex:none;min-width:3rem}.example-flow-source small{color:var(--sl-color-gray-3);font-size:.65rem;display:block}.example-flow-hub{border:1px solid var(--sl-color-accent);font-family:var(--font-heading);color:var(--sl-color-white);background:var(--sl-color-bg);border-radius:.45rem;flex:none;padding:.5rem .65rem;font-size:.9rem;font-weight:700}.example-flow-wire{background:var(--sl-color-gray-4);flex:1;min-width:.65rem;height:1px;position:relative}.example-flow-row>.example-flow-wire:after{content:"";border-top:1px solid var(--sl-color-gray-4);border-right:1px solid var(--sl-color-gray-4);width:4px;height:4px;position:absolute;top:-2px;right:1px;transform:rotate(45deg)}.example-flow-tabs{flex:1;position:relative}.example-flow-origin+.example-flow-tabs{flex:0 0 8rem}.example-flow-tabs[data-branched=true]:before{content:"";border-left:1px solid var(--sl-color-gray-4);position:absolute;top:1.75rem;bottom:1.75rem;left:0}.example-flow-row{align-items:center;height:3.5rem;display:flex}.example-flow-tab{border:1px solid var(--st-line);border-top:3px solid var(--sl-color-gray-4);background:var(--sl-color-bg);border-radius:.4rem;flex:0 0 6.5rem;padding:.35rem .6rem}.example-flow-tab>span{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.example-flow-tab[data-current=true]{border-top-color:var(--sl-color-accent);color:var(--sl-color-white)}.example-flow-tab time{color:var(--sl-color-gray-2);font-size:.65rem;display:block}.example-art{padding:var(--example-inset);min-height:20rem}.example-art-loading{min-height:20rem;color:var(--sl-color-gray-3);justify-content:center;align-items:center;display:flex}.example-reads{margin:0 var(--example-inset) 1.25rem;border-top:1px solid var(--st-line);color:var(--sl-color-gray-2);padding-top:.75rem;font-size:.8rem}.example-reads summary{cursor:pointer;align-content:center;min-height:44px}.example-reads>div{justify-content:space-between;gap:1rem;padding-block:.5rem;display:flex}.example-reads ol{min-height:7.5rem;margin:0;padding:0;list-style:none}.example-reads li{border-top:1px solid var(--st-line);font-variant-numeric:tabular-nums;align-items:center;gap:.75rem;padding:.4rem 0;font-size:.75rem;display:flex}.example-reads li span:last-child{color:var(--sl-color-gray-3);margin-left:auto}.example-demo :where(button,summary):focus-visible{outline:2px solid var(--sl-color-accent);outline-offset:4px}.example-footnote{padding:0 var(--example-inset) 1.25rem;color:var(--sl-color-gray-3);margin:0;font-size:.75rem;line-height:1.5}.example-error{padding:1rem var(--example-inset);background:var(--st-danger)}.example-error p{overflow-wrap:anywhere;margin:0;font-size:.9rem}.example-test-value{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@container example (width<=34rem){.example-flow{font-size:.75rem}.example-flow-hub{padding:.4rem;font-size:.8rem}.example-flow-origin+.example-flow-tabs{flex-basis:6.5rem}.example-flow-tab{flex-basis:5.5rem;padding-inline:.4rem}.example-controls{flex-direction:row;flex:100%;align-items:center}.example-invitation{flex-direction:column;align-items:flex-start;gap:1rem}.example-demo .example-primary{width:100%}}@media (forced-colors:active){.example-demo .example-primary{border-color:buttontext}.example-status-dot.is-live,.example-flow-tab i.is-live{background:highlight}}