.qst,.qst__track{position:relative}.qst__track.is-pinned{height:340vh}.qst__pin{padding-block:var(--qs-band-tight)}.qst__track.is-pinned .qst__pin{position:sticky;top:calc(var(--qs-nav-height) + clamp(20px,6vh,64px));padding-block:0}.qst__head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;padding-bottom:clamp(18px,2.4vh,26px);margin-bottom:clamp(26px,4.4vh,52px);border-bottom:1px solid var(--qs-rule)}.qst__title{margin:0;max-width:26ch;font-family:var(--qs-font-display);font-weight:700;font-size:var(--qs-display-3);line-height:var(--qs-leading-title);letter-spacing:var(--qs-track-title);color:var(--qs-text)}.qst__skip{font:500 var(--qs-text-sm)/1.4 var(--qs-font-sans);color:var(--qs-text-accent);border-bottom:1px solid color-mix(in srgb,currentColor 40%,transparent);transition:border-color var(--qs-dur-base) var(--qs-ease)}.qst__skip:hover{border-bottom-color:currentColor}.qst__skip:focus-visible{outline:2px solid var(--qs-focus);outline-offset:3px}.qst__body{display:grid;grid-template-columns:minmax(0,1fr)}.qst__track.is-pinned .qst__body{grid-template-columns:minmax(180px,2fr) minmax(0,10fr);column-gap:clamp(32px,4vw,72px)}.qst-steps{position:relative;display:grid;align-self:start;align-content:start;gap:20px;margin:0;padding:2px 0 2px 18px;list-style:none}.qst-steps:before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--qs-rule)}.qst-steps:after{content:"";position:absolute;left:0;top:0;width:1px;height:var(--qst-fill, 0%);background:var(--qs-teal)}.qst-steps li{display:grid;grid-template-columns:30px 1fr;font:500 var(--qs-text-sm)/1.35 var(--qs-font-sans);color:var(--qs-text-tertiary);transition:color .24s var(--qs-ease)}.qst-steps li.is-done{color:var(--qs-text-secondary)}.qst-steps li.is-active{color:var(--qs-text)}.qst-steps__num{font:400 var(--qs-text-mono)/1.9 var(--qs-font-mono);letter-spacing:.08em}.qst-steps li.is-active .qst-steps__num{color:var(--qs-text-accent)}.qst-step{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;font:500 var(--qs-text-xs)/1.4 var(--qs-font-sans);color:var(--qs-text-tertiary)}.qst-step span{font:400 var(--qs-text-mono)/1 var(--qs-font-mono);letter-spacing:.08em;color:var(--qs-text-accent)}.qst-typed{display:grid}.qst-typed>span{grid-area:1 / 1}.qst-typed__full{color:transparent}.qst-mark{color:inherit;background:none;background-image:linear-gradient(var(--qs-teal),var(--qs-teal));background-repeat:no-repeat;background-position:0 100%;background-size:100% 2px;padding-bottom:1px}.qst-tryband{padding-block:var(--qs-band);scroll-margin-top:var(--qs-nav-height)}.qst-try{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}.qst-try__head h3{margin:0 0 12px;font-family:var(--qs-font-display);font-weight:700;font-size:var(--qs-display-4);line-height:var(--qs-leading-title);letter-spacing:var(--qs-track-title)}.qst-try__head p{margin:0;max-width:36ch;font:400 var(--qs-text-sm)/1.6 var(--qs-font-sans);color:var(--qs-text-secondary)}.qst-try__result{padding-top:36px;border-top:1px solid var(--qs-rule)}@media(min-width:1024px){.qst-try{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,5.5vw,112px)}.qst-try__result,.qst-try>[data-demo-output]{grid-column:1 / -1}}[data-ground] .qlt--line .qlt__live,[data-ground] .qlt--line .qlt__head svg{display:none}[data-ground] .qlt--line .qlt__head label{font:500 var(--qs-text-xs)/1.4 var(--qs-font-sans);color:var(--qs-text-tertiary)}[data-ground] .qlt--line textarea{field-sizing:content;min-height:calc(3em + 22px);max-height:calc(12em + 22px);padding:8px 0 14px;resize:none;background:transparent;border:0;border-bottom:1px solid var(--qs-rule-loud);font:400 clamp(1.125rem,1.45vw,1.375rem)/1.5 var(--qs-font-sans);color:var(--qs-text)}[data-ground] .qlt--line textarea:focus-visible{box-shadow:inset 0 -2px 0 var(--qs-focus);border-bottom-color:var(--qs-focus)}.qst .qst-tryband .qlt--line textarea{background:transparent;border:0;border-bottom:1px solid var(--qs-rule-loud)}.qst .qst-tryband .qlt--line textarea:focus-visible{border-bottom-color:var(--qs-teal)}[data-ground] .qlt--line .qlt__examples button{min-height:32px;padding:4px 0;border:0;border-bottom:1px solid var(--qs-rule);background:transparent;color:var(--qs-text-secondary)}[data-ground] .qlt--line .qlt__examples button:hover,[data-ground] .qlt--line .qlt__examples button[aria-pressed=true]{background:transparent;color:var(--qs-text);border-bottom-color:var(--qs-text)}@media(pointer:coarse){[data-ground] .qlt--line .qlt__examples button{min-height:44px}}[data-ground] .qlt--line .qlt__run{background:var(--qs-surface-inverse);border-color:var(--qs-surface-inverse);color:var(--qs-text-inverse)}[data-ground] .qlt--line .qlt__run:hover:not(:disabled){background:var(--qs-teal);border-color:var(--qs-teal);color:var(--qs-ink);transform:none}[data-ground] .qst-try .qlt-actions__chips button{padding:4px 0;margin-right:14px;border:0;border-bottom:1px solid var(--qs-rule);background:transparent}[data-ground] .qst-try .qlt-actions__chips button:hover:not(:disabled){background:transparent;border-bottom-color:var(--qs-text)}[data-ground] .qst-try .qlt-actions__own input{background:transparent;border:0;border-bottom:1px solid var(--qs-rule-loud);padding-inline:0}[data-ground] .qst-try .qlt-actions__own input:focus-visible{outline:none;box-shadow:inset 0 -2px 0 var(--qs-teal)}@media(prefers-reduced-motion:reduce){.qst-steps li{transition:none}}
