#ydc-process-graphics{--ydc-ink:color-mix(in srgb,var(--foreground) 76%,var(--background));--ydc-faint:color-mix(in srgb,var(--foreground) 24%,var(--background));--ydc-clay:color-mix(in srgb,var(--foreground) 5%,var(--background));--ydc-material:color-mix(in srgb,var(--foreground) 11%,var(--background))}
#ydc-process-graphics .intro{padding-right:96px;margin-bottom:24px}
#ydc-process-graphics .throughout{max-width:65ch;margin-bottom:30px}
#ydc-process-graphics .phase{display:grid;grid-template-columns:minmax(180px,1fr) minmax(260px,1.8fr);gap:32px;align-items:center;padding:26px 0}
#ydc-process-graphics .phase h3{margin:6px 0 20px}
#ydc-process-graphics .fragment{font-weight:500;margin:0 0 12px}
#ydc-process-graphics .explanation{margin:0}
#ydc-process-graphics figure{margin:0;min-width:0}
#ydc-process-graphics svg{display:block;width:100%;overflow:visible}
#ydc-process-graphics svg text{font-size:12px;font-weight:400;fill:var(--foreground)}
#ydc-process-graphics svg path,#ydc-process-graphics svg line,#ydc-process-graphics svg rect{stroke-linejoin:round;stroke-linecap:round}
#ydc-process-graphics .learn{display:grid;grid-template-columns:minmax(180px,1fr) minmax(260px,1.8fr);gap:32px;align-items:center;margin:24px 0 36px}
#ydc-process-graphics .motion-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
#ydc-process-graphics .motion-head h3{margin:0}
#ydc-process-graphics .motion-status{margin:4px 0 0;min-height:24px;text-align:center}
#yg-scroll{display:none}
#ydc-process-graphics.scroll-mode>.phase,#ydc-process-graphics.scroll-mode>.learn,#ydc-process-graphics.scroll-mode>hr{display:none}
#ydc-process-graphics.scroll-mode #yg-scroll{display:block;position:relative}
#yg-scroll-panel{position:sticky;top:24px;padding:24px 0;background:var(--background)}
#yg-scroll-content{display:grid;grid-template-columns:minmax(210px,.85fr) minmax(280px,2fr);gap:40px;align-items:center}
#yg-scroll-copy h3{margin:8px 0 24px}
#yg-scroll-copy{position:relative;min-height:260px;display:flex;flex-direction:column;justify-content:center}
#yg-scroll-description{color:color-mix(in srgb,var(--foreground) 76%,var(--background))}
#yg-scroll-counter{margin:0}
#yg-scroll-caption{position:relative;margin:0;min-height:40px;text-align:center}
#yg-scroll-progress{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:28px 0 0;padding:0;list-style:none}
#yg-scroll-progress li{color:var(--muted-foreground)}
#yg-scroll-progress li::before{content:'';display:block;height:2px;margin-bottom:8px;background:var(--border)}
#yg-scroll-progress li[data-active="true"]{color:var(--foreground);font-weight:500}
#yg-scroll-progress li[data-active="true"]::before{background:var(--foreground)}
@media(max-width:700px){#yg-scroll-progress{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}}
#ydc-process-graphics .scroll-intro{display:none}
#ydc-process-graphics.scroll-mode .scroll-intro{display:block}
@media(max-width:700px){#yg-scroll-content{grid-template-columns:1fr;gap:0}#yg-scroll-copy{position:relative;min-height:205px}#yg-scroll-copy h3{margin:6px 0 12px}#yg-scroll-panel{top:12px;padding:8px 0}#yg-scroll-progress{margin-top:12px}}
@media(max-width:600px){#ydc-process-graphics .learn{grid-template-columns:1fr;gap:12px}#ydc-process-graphics .phase{grid-template-columns:1fr;gap:12px;padding:24px 0}#ydc-process-graphics .phase h3{margin-bottom:12px}}