/* Scoped styles: this lesson loads its own assets. */
.path-demo{margin:28px 0;padding:25px;background:var(--sand);border:1px solid var(--line);scroll-margin-top:16px}
.article-body .path-demo>h3:first-child{margin:0 0 12px;font-size:22px}
.article-body .path-demo>p{font-size:12px;line-height:1.9;color:var(--muted);margin:12px 0}
.path-demo-controls{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;gap:8px 14px;margin:22px 0 18px}
.path-demo-controls label{font-size:12px;line-height:1.7}
.path-demo-controls label:nth-of-type(1){grid-column:1;grid-row:1}
.path-demo-controls label:nth-of-type(2){grid-column:2;grid-row:1}
.path-demo-controls select{width:100%;min-width:0;min-height:44px;background:var(--white);color:var(--ink);font:13px var(--sans);padding:9px;border:1px solid #b6c2b7;border-radius:0;cursor:pointer}
.path-demo-controls select:nth-of-type(1){grid-column:1;grid-row:2}
.path-demo-controls select:nth-of-type(2){grid-column:2;grid-row:2}
.path-demo-controls button{grid-column:3;grid-row:2;align-self:stretch;background:transparent;border:1px solid #b6c2b7;padding:7px 12px;font-size:12px}
.path-demo-controls :disabled{opacity:.55;cursor:default}
.path-demo-controls select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.path-demo dl{display:grid;grid-template-columns:minmax(120px,.9fr) minmax(0,1.3fr);column-gap:16px;row-gap:12px;border-block:1px solid var(--line);padding:18px 0;margin:18px 0;font-size:12px}
.path-demo dt{color:var(--muted)}
.path-demo dd{margin:0;overflow-wrap:anywhere}
.path-demo dd code{font-size:13px}
.path-demo [data-path-parent]{font-weight:600}
.path-demo-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.path-demo-comparison section{background:var(--white);padding:17px;min-width:0}
.article-body .path-demo-comparison h3{font-size:14px;margin:0 0 10px}
.article-body .path-demo-comparison p{font-size:12px;line-height:1.9;margin:0;overflow-wrap:anywhere}
.path-demo-comparison section:last-child{border-top:3px solid var(--green);padding-top:14px}
.article-body .path-demo>h3:not(:first-child){font-size:14px;margin:24px 0 9px}
.path-demo>pre{background:var(--paper);margin:0;padding:15px;overflow-x:auto;font:11px/1.8 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.path-demo>pre code{font-size:inherit}
.article-body .path-demo [data-path-status]{margin:16px 0 0;padding-top:13px;border-top:1px solid var(--line);font-size:12px;color:var(--ink)}
@media(max-width:600px){.path-demo{padding:18px 16px}.article-body .path-demo>h3:first-child{font-size:19px}.path-demo-controls{grid-template-columns:minmax(0,1fr);gap:6px;margin-top:16px}.path-demo-controls label:nth-of-type(1){grid-area:1/1}.path-demo-controls select:nth-of-type(1){grid-area:2/1}.path-demo-controls label:nth-of-type(2){grid-area:3/1;margin-top:7px}.path-demo-controls select:nth-of-type(2){grid-area:4/1}.path-demo-controls button{grid-area:5/1;justify-self:start;min-height:40px;margin-top:7px}.path-demo dl{grid-template-columns:1fr;gap:4px}.path-demo dd{margin-bottom:10px}.path-demo-comparison{grid-template-columns:1fr}.path-demo-comparison section{padding:15px}.path-demo-comparison section:last-child{padding-top:12px}}