.hw-root{--hw-dot:56px;--hw-pad:14px}.hw-grid{grid-template-areas:"intro""steps""photo";gap:20px;display:grid}.hw-intro{grid-area:intro}.hw-steps{grid-area:steps;align-self:start;padding:6px 16px}.hw-step{grid-template-columns:var(--hw-dot) minmax(0, 1fr);padding-block:var(--hw-pad);align-items:start;gap:14px;display:grid;position:relative}.hw-step:not(:last-child):before{content:"";left:calc(var(--hw-dot) / 2 - 1.5px);top:calc(var(--hw-pad) + var(--hw-dot) / 2);background:var(--pub-brand-soft);width:3px;height:100%;position:absolute}.hw-dot{z-index:1;width:var(--hw-dot);height:var(--hw-dot);background:var(--pub-brand-soft);border-radius:999px;place-items:center;font-size:26px;line-height:1;display:grid;position:relative}.hw-flip{display:inline-block;transform:scaleX(-1)}.hw-num{background:var(--pub-night);width:24px;height:24px;color:var(--pub-on-night);box-shadow:0 0 0 2px var(--pub-surface);font:700 13px/24px var(--pub-body);font-variant-numeric:tabular-nums;text-align:center;border-radius:999px;position:absolute;top:-4px;right:-4px}.hw-step-text{gap:3px;min-width:0;padding-top:3px;display:grid}.hw-step-text p{color:var(--pub-ink-2);text-wrap:pretty;font-size:16px}.hw-action{justify-self:start;margin-top:9px}.hw-photo{border-radius:var(--pub-r-lg);background:var(--pub-sunken);box-shadow:var(--pub-shadow);aspect-ratio:1;grid-area:photo;margin:0;position:relative;overflow:hidden}.hw-photo img{object-fit:cover;object-position:50% 70%;width:100%;height:100%;display:block}.hw-photo figcaption{background:var(--pub-night);color:var(--pub-on-night);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:700;line-height:1.2;position:absolute;bottom:12px;left:12px}@media (min-width:480px){.hw-photo{aspect-ratio:4/3}}@media (min-width:600px){.hw-grid{grid-template-columns:minmax(0,1fr) clamp(200px,32vw,248px);grid-template-areas:"intro intro""steps photo";gap:24px}.hw-photo{aspect-ratio:9/16;align-self:start}.hw-photo img{object-position:50% 50%}}@media (min-width:700px){.hw-steps{padding:10px 24px}}@media (min-width:960px){.hw-root{--hw-dot:64px;--hw-pad:16px}.hw-grid{grid-template:"intro steps""photo steps"1fr/minmax(0,.8fr) minmax(0,1fr);gap:28px 56px}.hw-intro{gap:14px;padding-top:12px}.hw-steps{padding:14px 32px}.hw-step{gap:18px}.hw-dot{font-size:30px}.hw-step-text{padding-top:6px}.hw-photo{border-radius:var(--pub-r-xl);width:min(100%,300px);box-shadow:var(--pub-shadow-lift);transform-origin:30% 0;transform:rotate(-2deg)}}