.vm-demo{--vm-ease: cubic-bezier(.16, 1, .3, 1);--vm-good: oklch(.55 .13 155);--vm-info: oklch(.5 .12 245);--vm-warn: oklch(.6 .14 65);--vm-bad: oklch(.55 .19 27);--vm-muted: var(--sl-color-gray-3);margin:1.5rem 0 3rem;border:1px solid var(--sl-color-gray-5);border-radius:.9rem;background:var(--sl-color-black);overflow:hidden;font-size:.92rem;container-type:inline-size}main:has(.vm-demo){--sl-content-width: 72rem}.vm-demo *,.vm-demo *:before,.vm-demo *:after{box-sizing:border-box}.vm-demo__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem 1rem;border-bottom:1px solid var(--sl-color-gray-6);background:var(--sl-color-bg-sidebar)}.vm-demo__app{display:inline-flex;align-items:center;gap:.55rem;font-family:"Poppins",var(--sl-font);font-weight:600;font-size:.85rem;color:var(--sl-color-white)}.vm-demo__app svg{width:1.05rem;height:1.05rem;color:var(--vm-teal-bright)}.vm-demo__tag{font-size:.72rem;font-weight:600;color:var(--sl-color-gray-3)}.vm-demo__body{display:grid;gap:0}@container (min-width: 56rem){.vm-demo__body--split{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}.vm-demo__body--split>.vm-trace{border-top:0;border-left:1px solid var(--sl-color-gray-6)}}.vm-demo__main{padding:clamp(1rem,2.5vw,1.5rem);min-width:0}.vm-form{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));align-items:end}.vm-field{display:grid;gap:.3rem;margin:0;min-width:0}.vm-field span{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sl-color-gray-3)}.vm-field :is(select,input){width:100%;min-height:2.5rem;padding:.45rem .65rem;font:inherit;color:var(--sl-color-white);background:var(--sl-color-black);border:1px solid var(--sl-color-gray-5);border-radius:.5rem}.vm-field :is(select,input):focus-visible{outline:2px solid var(--vm-teal-bright);outline-offset:1px}.vm-run{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.5rem;padding:.5rem 1.1rem;font:inherit;font-family:"Poppins",var(--sl-font);font-weight:600;color:#fff;background:var(--vm-navy);border:0;border-radius:.5rem;cursor:pointer;transition:transform .25s var(--vm-ease),background-color .2s}.vm-run:hover{background:#2c2768;transform:translateY(-1px)}.vm-run:disabled{opacity:.6;cursor:progress;transform:none}.vm-run svg{width:1rem;height:1rem}.vm-trace{display:flex;flex-direction:column;min-width:0;border-top:1px solid var(--sl-color-gray-6);background:#171731;color:#d9deec}.vm-trace__head{display:flex;justify-content:space-between;padding:.6rem 1rem;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9bb0c7;border-bottom:1px solid oklch(.3 .04 282)}.vm-trace__list{flex:1;margin:0;padding:.5rem 0;list-style:none;max-height:22rem;min-height:7rem;overflow-y:auto;font-family:ui-monospace,SF Mono,JetBrains Mono,monospace;font-size:.76rem}.vm-trace__empty{padding:.4rem 1rem;color:#8590a2;font-family:var(--sl-font)}.vm-trace__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.6rem;align-items:baseline;margin:0;padding:.3rem 1rem;animation:vm-in .45s var(--vm-ease) both}.vm-trace__method{color:var(--vm-teal);font-weight:700}.vm-trace__path{overflow-wrap:anywhere;color:#e5e8ef!important;background:none!important;border:0!important;padding:0!important;font-size:inherit!important}.vm-trace__status{color:#73ce95;white-space:nowrap}.vm-trace__row.is-pending .vm-trace__status{color:#949fb2;animation:vm-blink .9s steps(2) infinite}.vm-trace__foot{padding:.6rem 1rem;font-size:.72rem;color:#949fb2;border-top:1px solid oklch(.3 .04 282)}.vm-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.18rem .6rem;font-size:.74rem;font-weight:700;line-height:1.35;border-radius:999px;white-space:nowrap;color:var(--tone);background:color-mix(in oklab,var(--tone) 12%,transparent)}.vm-pill:before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:currentColor}[data-tone=good]{--tone: var(--vm-good)}[data-tone=info]{--tone: var(--vm-info)}[data-tone=warn]{--tone: var(--vm-warn)}[data-tone=bad]{--tone: var(--vm-bad)}[data-tone=muted]{--tone: var(--vm-muted)}.vm-results{display:grid;gap:.75rem;margin-top:1.25rem}@container (min-width: 34rem){.vm-results{grid-template-columns:1fr 1fr}}.vm-card{display:grid;gap:.45rem;align-content:start;padding:.95rem 1rem;border:1px solid var(--sl-color-gray-5);border-radius:.7rem;background:var(--sl-color-black);animation:vm-rise .6s var(--vm-ease) both;animation-delay:calc(var(--i, 0) * .11s)}.vm-card--wide{grid-column:1 / -1}.vm-card__k{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sl-color-gray-3)}.vm-card__v{font-family:"Poppins",var(--sl-font);font-weight:600;font-size:1rem;color:var(--sl-color-white)}.vm-card p{margin:0;color:var(--sl-color-gray-2);line-height:1.5}.vm-card ul{margin:0;padding-left:1.1rem;color:var(--sl-color-gray-2)}.vm-card li{margin:.15rem 0}.vm-card a{color:var(--sl-color-text-accent)}.vm-card__cta{justify-self:start;margin-top:.25rem;font-weight:600;text-decoration:none}.vm-card__cta:hover{text-decoration:underline}.vm-note{margin:1rem 0 0;font-size:.78rem;color:var(--sl-color-gray-3)}@keyframes vm-in{0%{opacity:0;transform:translateY(4px)}}@keyframes vm-rise{0%{opacity:0;transform:translateY(12px) scale(.985)}}@keyframes vm-blink{50%{opacity:.3}}@keyframes vm-spin{to{transform:rotate(360deg)}}.vm-spin{animation:vm-spin .9s linear infinite}@media(prefers-reduced-motion:reduce){.vm-demo *,.vm-demo *:before,.vm-demo *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:.01ms!important}}main:has(.vm-demo) .sl-markdown-content>:not(.vm-demo){max-width:46rem}