/* Native worked examples. All rules stay inside the vw namespace. */
.vw-section{color:var(--ink,#0b1f35);--vw-line:var(--line,#d9e5eb);--vw-accent:var(--accent,#087f8c);--vw-muted:#486477;--vw-soft:#f2f8fa}
.vw-section-tinted{background:var(--vw-soft)}
.vw-section [hidden]{display:none!important}
.vw-heading{max-width:850px;margin-bottom:2.1rem}
.vw-kicker{display:block;margin-bottom:.8rem;color:var(--vw-accent);font-size:.88rem;font-weight:800;letter-spacing:.065em;text-transform:uppercase}
.vw-heading h2{margin:0 0 1rem;line-height:1.15;text-wrap:balance}
.vw-heading p{max-width:72ch;margin:0;color:var(--vw-muted);font-size:1.08rem;line-height:1.7}
.vw-story{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem;margin:0 0 2rem;padding:0;list-style:none}
.vw-step{position:relative;display:flex;flex-direction:column;min-width:0;padding:1.4rem;border:1px solid var(--vw-line);border-radius:18px;background:#fff}
.vw-step:not(:last-child)::after{content:"→";position:absolute;top:1.75rem;right:-1.45rem;z-index:1;color:#527486;font-size:1.45rem;font-weight:800}
.vw-step-number{display:grid;place-items:center;align-self:flex-start;width:2.25rem;height:2.25rem;margin-bottom:1.2rem;border-radius:50%;background:#e6f3f3;color:#076571;font-size:1rem;font-weight:850}
.vw-step-label{margin-bottom:.5rem;color:var(--vw-muted);font-size:.85rem;font-weight:800;line-height:1.45}
.vw-step h3{margin:0 0 .75rem;font-size:1.14rem;line-height:1.35;text-wrap:balance}
.vw-step p{margin:0 0 1rem;color:var(--vw-muted);font-size:.98rem;line-height:1.65}
.vw-step-code{display:block;margin-top:auto;padding:.65rem .75rem;border-radius:9px;background:#f3f7fa;color:#1a465e;font-size:.86rem;line-height:1.6;overflow-wrap:anywhere}
.vw-step[aria-current="step"]{border-color:var(--vw-accent);box-shadow:0 0 0 2px rgba(8,127,140,.12)}
.vw-step[aria-current="step"] .vw-step-number{background:var(--vw-accent);color:#fff}
.vw-lab{padding:1.8rem;border:1px solid #c1dbe2;border-radius:22px;background:linear-gradient(145deg,#f5fafb,#fff)}
.vw-lab-heading h3{margin:0 0 .55rem;font-size:1.5rem;line-height:1.3}
.vw-lab-heading p{max-width:70ch;margin:0 0 1.25rem;color:var(--vw-muted);font-size:1rem;line-height:1.65}
.vw-choices{display:flex;flex-wrap:wrap;gap:.65rem;margin-bottom:1.35rem}
.vw-choice,.vw-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.05rem;border:1px solid #aecbd5;border-radius:10px;background:#fff;color:#173c53;font:inherit;font-size:1rem;font-weight:750;line-height:1.35;cursor:pointer;text-align:center}
.vw-choice[aria-pressed="true"]{border-color:var(--vw-accent);background:#e5f4f3;color:#065963;box-shadow:inset 0 0 0 1px var(--vw-accent)}
.vw-choice:hover,.vw-button-secondary:hover{background:#eaf5f6}
.vw-choice:focus-visible,.vw-button:focus-visible,.vw-rule summary:focus-visible,.vw-text-link:focus-visible,.vw-section a:focus-visible{outline:3px solid var(--vw-accent);outline-offset:4px}
.vw-lab-panels{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.35rem;align-items:stretch}
.vw-input-panel,.vw-result{min-width:0;padding:1.35rem;border:1px solid var(--vw-line);border-radius:14px;background:#fff}
.vw-input-panel h4,.vw-result h4{margin:0 0 1rem;font-size:1.12rem;line-height:1.45}
.vw-code{margin:0 0 .85rem;padding:1.1rem;border:1px solid #24465d;border-radius:11px;background:#0b1f35;color:#eaf5fa;line-height:1.85;font-size:clamp(.85rem,.3vw + .78rem,1rem);white-space:pre-wrap;overflow-wrap:anywhere}
.vw-code code{font:inherit;color:inherit;background:none;padding:0}
.vw-code-highlight{background:#fce9ad;color:#283c45;border-radius:4px;padding:.14rem .2rem;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.vw-caption{margin:0;color:var(--vw-muted);font-size:.91rem;line-height:1.6}
.vw-result{display:flex;flex-direction:column;justify-content:center;border-left:4px solid #7897a6;background:#f8fafb}
.vw-result-symbol{display:grid;place-items:center;align-self:flex-start;width:2.4rem;height:2.4rem;margin-bottom:1rem;border:1px solid currentColor;border-radius:50%;font-size:1.15rem;font-weight:850}
.vw-result p{margin:0;color:var(--vw-muted);font-size:1rem;line-height:1.75}
.vw-result[data-vw-state="fail"]{border-left-color:#9b5726;background:#fff8ed}
.vw-result[data-vw-state="fail"] .vw-result-symbol{color:#874717}
.vw-result[data-vw-state="pass"]{border-left-color:var(--vw-accent);background:#eef9f5}
.vw-result[data-vw-state="pass"] .vw-result-symbol{color:#076657}
.vw-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:1.4rem}
.vw-button{background:#0b1f35;border-color:#0b1f35;color:#fff}
.vw-button:hover{background:#164360;border-color:#164360}
.vw-button-secondary{background:#fff;border-color:#b9ced8;color:#173c53}
.vw-actions .vw-caption{flex:1 1 260px;margin-left:.4rem}
.vw-rule{margin:1.5rem 0 0;border:1px solid var(--vw-line);border-radius:14px;background:#fff}
.vw-rule summary{padding:1.1rem 1.3rem;font-size:1rem;font-weight:750;line-height:1.55;cursor:pointer}
.vw-rule-body{padding:0 1.3rem 1rem;color:var(--vw-muted);font-size:1rem;line-height:1.75}
.vw-rule-body code{padding:.15rem .3rem;border-radius:5px;background:#edf5f7;color:#17475a;overflow-wrap:anywhere}
.vw-rule-body a,.vw-source-links a{color:#076778;text-underline-offset:3px}
.vw-note{margin:1.4rem 0;color:var(--vw-muted);font-size:.96rem;line-height:1.75;max-width:95ch}
.vw-text-link{display:inline-block;padding:.35rem 0;color:#076778;font-size:1rem;font-weight:750;line-height:1.6;text-underline-offset:4px}
.vw-state{display:inline-flex;align-self:flex-start;align-items:center;min-height:32px;margin-top:auto;padding:.4rem .75rem;border:1px solid #cbdbe4;border-radius:8px;background:#f1f6f9;color:#315469;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.89rem;font-weight:750;line-height:1.4}
.vw-state-confirmed{border-color:#aed6c9;background:#e8f6ef;color:#075c4c}
.vw-outcomes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:1.5rem}
.vw-outcome{position:relative;min-width:0;padding:1.6rem;border:1px solid #b4d7cc;border-radius:16px;background:#f4fbf7}
.vw-outcome h3{margin:1rem 0 .75rem;font-size:1.2rem;line-height:1.4}
.vw-outcome p{margin:0;color:var(--vw-muted);font-size:1rem;line-height:1.75}
.vw-outcome-open{border-color:#e4cdab;background:#fffaf2}
.vw-outcome-mark{display:grid;place-items:center;width:2.35rem;height:2.35rem;border:1px solid #a77039;border-radius:50%;color:#84521e;font-size:1.15rem;font-weight:800}
.vw-state-transition{display:flex;align-items:center;gap:.85rem;min-height:2.35rem;color:#087361}
.vw-state-transition code{padding:.3rem .65rem;border:1px solid #b3d8cb;border-radius:7px;background:#fff;color:#075d4d;font-size:1rem}
.vw-state-transition>span{font-size:1.5rem}
.vw-links{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 2rem}
.vw-source-links{color:var(--vw-muted);font-size:.9rem;line-height:1.7}
.vw-state-map{margin:0;padding:1.6rem;border:1px solid var(--vw-line);border-radius:20px;background:#f7fafb}
.vw-state-lane{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(0,2.8fr);gap:1.4rem;align-items:center}
.vw-state-lane+.vw-state-lane{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--vw-line)}
.vw-lane-owner strong{display:block;margin-bottom:.4rem;font-size:1.08rem;line-height:1.5}
.vw-lane-owner span{display:block;color:var(--vw-muted);font-size:.93rem;line-height:1.6}
.vw-state-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;margin:0;padding:0;list-style:none}
.vw-state-track li{position:relative;display:flex;align-items:center;justify-content:center;min-height:88px;padding:1rem;border:1px solid #bfd7e0;border-radius:12px;background:#fff;color:#1d495e;font-size:1rem;font-weight:750;line-height:1.5;text-align:center;overflow-wrap:anywhere}
.vw-state-track li:not(:last-child)::after{content:"→";position:absolute;right:-1.4rem;color:#527486;font-size:1.35rem}
.vw-state-map figcaption{max-width:90ch;margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--vw-line);color:var(--vw-muted);font-size:1rem;line-height:1.75}
@media(max-width:1000px){.vw-story{grid-template-columns:repeat(2,minmax(0,1fr))}.vw-step:nth-child(2)::after{display:none}.vw-state-lane{grid-template-columns:1fr}.vw-step{padding:1.25rem}}
@media(max-width:700px){.vw-heading{margin-bottom:1.5rem}.vw-story{grid-template-columns:1fr;gap:1.5rem}.vw-step{display:grid;grid-template-columns:2.2rem minmax(0,1fr);column-gap:.8rem;padding:1.1rem}.vw-step-number{grid-column:1;grid-row:1 / 5;width:2rem;height:2rem;margin:0}.vw-step-label,.vw-step h3,.vw-step p,.vw-step-code,.vw-step .vw-state{grid-column:2}.vw-step h3{font-size:1.15rem}.vw-step p{margin-bottom:.75rem}.vw-step:not(:last-child)::after,.vw-step:nth-child(2)::after{display:block;content:"↓";top:auto;bottom:-1.55rem;right:auto;left:1.4rem;font-size:1.3rem}.vw-lab{padding:1.05rem}.vw-lab-panels,.vw-outcomes{grid-template-columns:1fr}.vw-input-panel,.vw-result{padding:1.1rem}.vw-choices{gap:.5rem}.vw-choice{flex:1 1 120px}.vw-actions .vw-button{flex:1 1 180px}.vw-actions .vw-caption{margin:.25rem 0 0}.vw-state-map{padding:1.15rem}.vw-state-track{grid-template-columns:1fr;gap:1.45rem}.vw-state-track li{min-height:58px}.vw-state-track li:not(:last-child)::after{content:"↓";right:auto;left:calc(50% - .45rem);bottom:-1.5rem}.vw-state-lane+.vw-state-lane{margin-top:1.7rem;padding-top:1.5rem}.vw-heading p{font-size:1.03rem}.vw-rule summary{padding:1rem}.vw-rule-body{padding:0 1rem 1rem}}