step-guide{display:block;--sg-radius: 1rem;--sg-on-accent: #0b2417;--sg-active-bg: color-mix(in srgb, var(--sl-color-accent) 14%, transparent)}step-guide .sg-steps{counter-reset:sg-step;list-style:none;margin:0;padding:0}step-guide:not([data-enhanced]) .sg-step{counter-increment:sg-step;position:relative;padding-inline-start:2.75rem}step-guide:not([data-enhanced]) .sg-step+.sg-step{margin-top:1.5rem}step-guide:not([data-enhanced]) .sg-step:before{content:counter(sg-step);position:absolute;inset-inline-start:0;top:0;width:1.875rem;height:1.875rem;display:grid;place-items:center;border-radius:99px;background:var(--sl-color-accent-low);color:var(--sl-color-accent-high);font-weight:700;font-size:var(--sl-text-sm)}step-guide:not([data-enhanced]) .shot{margin-top:.75rem}step-guide[data-enhanced]{border:1px solid var(--sl-color-gray-5);border-radius:var(--sg-radius);background:var(--sl-color-bg-nav);overflow:clip}step-guide .sg-frame{display:grid;touch-action:pan-y}step-guide .sg-panel{display:flex;flex-direction:column;min-width:0;margin:0}step-guide[data-enhanced] .sg-step{display:flex;gap:.875rem;margin:0}step-guide .sg-step-body{min-width:0;flex:1;margin:0}step-guide .sg-step-body>:first-child{margin-top:0}step-guide .sg-step-body>:last-child{margin-bottom:0}step-guide .sg-number{flex:none;width:1.875rem;height:1.875rem;margin:0;display:grid;place-items:center;border:0;border-radius:99px;background:var(--sl-color-gray-6);color:var(--sl-color-gray-2);font:inherit;font-weight:700;font-size:var(--sl-text-sm);cursor:pointer;transition:background-color .2s,color .2s}step-guide .sg-step[data-active] .sg-number{background:var(--sl-color-accent);color:var(--sg-on-accent)}step-guide .sg-stage{display:grid;align-items:center;margin:0;padding:1rem;background:var(--sl-color-gray-7, var(--sl-color-gray-6))}step-guide .sg-stage .shot{grid-area:1 / 1;margin:0;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}step-guide .sg-stage .shot[data-active]{opacity:1;visibility:visible}step-guide .sg-stage .shot-media img,step-guide .sg-stage .shot-placeholder{margin-inline:auto}step-guide .sg-nav{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:0;padding:.75rem 1rem;border-top:1px solid var(--sl-color-gray-5)}step-guide .sg-nav-button{min-width:5rem;padding:.5rem 1rem;border:1px solid var(--sl-color-gray-4);border-radius:99px;background:transparent;color:var(--sl-color-white);font:inherit;font-weight:600;cursor:pointer}step-guide .sg-next{border-color:var(--sl-color-accent);background:var(--sl-color-accent);color:var(--sg-on-accent)}step-guide .sg-nav-button:disabled{opacity:.35;cursor:default}step-guide .sg-progress{display:flex;flex-direction:column;align-items:center;gap:.375rem}step-guide .sg-count{font-size:var(--sl-text-xs);color:var(--sl-color-gray-3)}step-guide .sg-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:.375rem;margin:0}step-guide .sg-dot{width:.5rem;height:.5rem;margin:0;padding:0;border:0;border-radius:99px;background:var(--sl-color-gray-5);cursor:pointer;transition:width .2s,background-color .2s}step-guide .sg-dot[aria-current]{width:1.25rem;background:var(--sl-color-accent)}step-guide[data-mode=single] .sg-frame{grid-template-areas:"stage" "panel"}step-guide[data-mode=single] .sg-stage{grid-area:stage}step-guide[data-mode=single] .sg-stage .shot-media img,step-guide[data-mode=single] .sg-stage .shot-placeholder{max-height:60vh}step-guide[data-mode=single] .sg-panel{grid-area:panel}step-guide[data-mode=single] .sg-steps{display:grid;padding:1.25rem 1rem}step-guide[data-mode=single] .sg-step{grid-area:1 / 1;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s}step-guide[data-mode=single] .sg-step[data-active]{opacity:1;visibility:visible}step-guide[data-mode=split] .sg-frame{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"panel stage"}step-guide[data-mode=split] .sg-panel{grid-area:panel}step-guide[data-mode=split] .sg-steps{display:flex;flex-direction:column;gap:.25rem;padding:.75rem}step-guide[data-mode=split] .sg-step{padding:.75rem;border-radius:.625rem;opacity:.55;cursor:pointer;transition:opacity .2s,background-color .2s}step-guide[data-mode=split] .sg-step:hover{opacity:.85}step-guide[data-mode=split] .sg-step[data-active]{opacity:1;background:var(--sg-active-bg);box-shadow:inset 3px 0 0 var(--sl-color-accent);cursor:default}step-guide[data-mode=split] .sg-nav{margin-top:auto}step-guide[data-mode=split] .sg-stage{grid-area:stage;align-items:start;padding:1.5rem}step-guide[data-mode=split] .sg-stage .shot{position:sticky;top:calc(var(--sl-nav-height, 4rem) + 1.5rem)}step-guide[data-mode=split] .sg-stage .shot-media img,step-guide[data-mode=split] .sg-stage .shot-placeholder{max-height:75vh}@media(min-width:72rem){html:not([data-has-toc]) step-guide[data-layout=auto]{--sg-wide: min(64rem, calc(100vw - var(--sl-content-inline-start, 0rem) - 4rem));width:var(--sg-wide);margin-inline:calc((100% - var(--sg-wide)) / 2)}}@media(prefers-reduced-motion:reduce){step-guide .sg-step,step-guide .sg-stage .shot,step-guide .sg-dot,step-guide .sg-number{transition:none}}