/* The getting started page: the home page's sea theme as one scrolling page. */
html.steps-page,.steps-page body{height:auto;overflow:visible;overscroll-behavior:auto}
.steps-page body{touch-action:auto;background:linear-gradient(var(--scene-sky-top),var(--scene-sky-low) 34rem,var(--paper) 60rem) no-repeat,var(--paper);transition:background .6s}
.steps-page .nav{position:sticky;top:0;z-index:10;padding-block:1rem;background:var(--scene-sky-top);box-shadow:0 1px 0 var(--sound-line);transition:background .6s}
.steps-page main{max-width:46rem;padding:6vh clamp(1.25rem,4vw,3.5rem) 5rem;margin:0 0 0 clamp(0rem,8vw,9rem)}
.intro h1{font-size:clamp(2.6rem,5.4vw,4.8rem);line-height:1.02}
.intro .line{font-size:clamp(1.05rem,1.4vw,1.22rem);max-width:34rem;margin:1.4rem 0 0;color:var(--ink-soft)}
.intro .need{font-size:.98rem;max-width:34rem;margin:1rem 0 0;color:var(--ink-soft)}
.intro .need a,.intro .line a{color:var(--ink);border-bottom:1px solid currentColor}
.steps-list{margin-top:4.5rem}
.steps-list section{padding:2.6rem 0;border-top:1px solid var(--sound-line);color:var(--ink-soft)}
.steps-list h2{font-size:clamp(1.7rem,2.6vw,2.3rem);color:var(--ink);margin-bottom:.9rem}
.steps-list h3{font:400 1.25rem/1.2 var(--serif);color:var(--ink);margin:1.8rem 0 .4rem}
.steps-list p{margin:.6rem 0;max-width:38rem}
.steps-list a{color:var(--ink);border-bottom:1px solid currentColor}
.steps-list code{font:400 .84em "JBMono",ui-monospace,monospace;background:var(--sound-bg);border:1px solid var(--sound-line);border-radius:6px;padding:.05rem .35rem;color:var(--ink);overflow-wrap:anywhere}
.steps-list .term pre{font-size:.86rem}
.steps-list .os-tabs{margin-top:1rem}
.steps-list .after h2{font-style:italic}
.steps-list ol{padding-left:1.2rem}.steps-list ol li{margin:.5rem 0}
.steps-list ul{padding-left:1.2rem;max-width:38rem}.steps-list ul li{margin:.6rem 0}.steps-list strong{color:var(--ink);font-weight:600}
.steps-list .table{overflow-x:auto;margin:1rem 0}.steps-list table{border-collapse:collapse;font-size:.95rem}.steps-list th,.steps-list td{text-align:left;padding:.5rem 1.2rem .5rem 0;border-bottom:1px solid var(--sound-line);vertical-align:top}.steps-list th{color:var(--ink);font-weight:600}
.steps-list .quiet{font-size:.9rem;color:var(--ink-faint)}
[data-theme="dark"] .steps-list .quiet{color:var(--ink-soft)}
.page-foot{background:var(--footer);padding:2.2rem clamp(1.25rem,4vw,3.5rem)}
.page-foot .foot{padding:0;margin:0;color:var(--footer-text);flex-wrap:wrap;gap:.6rem 1.4rem}
.page-foot .foot a:hover{color:#fff}
@media (max-width:760px){
  .steps-page .nav{padding-block:.9rem}
  .steps-page main{margin:0;padding-top:2.5rem}
  .steps-list{margin-top:3rem}
  .steps-list section{padding:2rem 0}
  .steps-list .term{padding:.6rem .6rem .6rem .8rem}
  .steps-list .term pre{font-size:.78rem}
}
.intro .cta{margin-top:2rem}
.steps-page body{min-height:100vh;display:flex;flex-direction:column}.steps-page main{flex:1 0 auto}
.diagram{margin:2rem 0 1.6rem}.diagram .frame{overflow-x:auto;border:1px solid var(--sound-line);border-radius:12px;background:var(--sound-bg);padding:1.1rem}.diagram svg{display:block;width:100%;height:auto;min-width:36rem}.diagram figcaption{font-size:.9rem;line-height:1.5;color:var(--ink-faint);margin-top:.7rem;max-width:38rem}
.term.artefact pre{white-space:pre;overflow-wrap:normal;overflow-x:auto;min-width:0}
.steps-list td code{overflow-wrap:normal;white-space:nowrap}.diagram .frame:focus-visible,.term.artefact pre:focus-visible,.steps-list .table:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.diagram .frame:focus-visible{border-radius:12px}
@media (min-width:1280px){.diagram .frame,.term.artefact,.steps-list .table{margin-right:-12rem}.term.artefact pre{font-size:.78rem}.steps-list td code wbr{display:none}}
.d-box{fill:var(--paper);stroke:var(--ink-faint);stroke-width:1}.d-soft{fill:none;stroke:var(--sound-line);stroke-width:1;stroke-dasharray:4 4}.d-key{fill:var(--paper);stroke:var(--accent);stroke-width:1.4}.d-line{fill:none;stroke:var(--ink-soft);stroke-width:1.2}.d-accent{fill:none;stroke:var(--accent);stroke-width:1.4}.d-head{fill:var(--ink-soft)}.d-head-accent{fill:var(--accent)}
.d-h{font:400 17px var(--serif);fill:var(--ink)}.d-t{font:400 13.5px var(--sans);fill:var(--ink)}.d-s{font:400 12px var(--sans);fill:var(--ink-faint)}.d-m{font:400 11px "JBMono",ui-monospace,monospace;fill:var(--ink-soft)}
.intro .toc ul{list-style:none;padding:0;margin:1.6rem 0 0;max-width:38rem;font-size:.95rem;color:var(--ink-soft)}.intro .toc li{padding:.15rem 0;break-inside:avoid}.intro .toc a{color:var(--ink);border-bottom:1px solid currentColor}.details-page .steps-list h2[id]{scroll-margin-top:6.5rem}
@media (min-width:760px){.intro .toc ul{columns:2;column-gap:2rem}}