/* How it works v3 (15 Oct 2026): five steps, each a headline row and a full-width figure.
   Figures are fine grey line drawings on a flat light panel with a few saturated blue accents
   (an isometric site, a contour map, a diff ribbon, a sorting machine, a feed). Tokens and fonts
   come from site.css only (--sans, --mono). Light only. Prefix: hw-.
   Every figure has a static fallback (.hw-static) that shows without JavaScript; how.js adds
   .hw-on to each figure it builds, which swaps in the interactive version (.hw-live). */

.hw { --hw-b1: #00b3fe; --hw-b2: #008dfd; --hw-b3: #0070fe; --hw-b4: #00318c; --hw-ink: #01286c;
  --hw-wire: #b9b09d; --hw-wire-2: #d9d1c0; --hw-g1: #8b939b; --hw-g2: #b0b6bc; --hw-panel: #fbf9f4; }
.hw .sec-head { margin-bottom: 8px; }
.hw .sec-head h2 { max-width: 24ch; }
.hw-lede { color: var(--muted); font-size: 17px; max-width: 56ch; margin-top: 6px; }

/* ---------------------------------------------------------------- step layout */
.hw-steps { display: grid; }
.hw-step { padding: 64px 0 0; scroll-margin-top: 72px; }
@media (min-width: 1100px) { .hw-step { padding-top: 96px; } }
.hw-head { display: grid; gap: 14px; margin-bottom: 28px; }
@media (min-width: 1100px) { .hw-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; margin-bottom: 36px; } }
.hw-title { display: grid; gap: 10px; align-content: start; }
@media (min-width: 1100px) { .hw-title { grid-column: 1 / span 5; } .hw-head > p { grid-column: 7 / -1; } }
.hw-n { font-family: var(--mono); font-size: 13px; color: var(--deep); font-variant-numeric: tabular-nums; }
.hw-title h4 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.025em; max-width: 16ch; }
.hw-head > p { color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 58ch; }

/* ---------------------------------------------------------------- figure panel */
.hw-fig { margin: 0; min-width: 0; position: relative; border-top: 1px solid var(--text); background: var(--hw-panel); }
.hw-live { display: none; min-width: 0; }
.hw-fig.hw-on .hw-live { display: grid; }
.hw-fig.hw-on .hw-static { display: none; }
@media (min-width: 1100px) {
  .hw-live { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .hw-step:nth-child(even) .hw-live { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .hw-step:nth-child(even) .hw-rail { order: -1; border-left: 0; border-right: 1px solid var(--line); }
}
.hw-draw { position: relative; display: grid; align-content: center; min-width: 0; padding: 20px 16px; }
@media (min-width: 700px) { .hw-draw { padding: 32px 32px 28px; } }
.hw-draw svg { display: block; width: 100%; height: auto; overflow: visible; }
.hw-rail { display: grid; align-content: start; gap: 18px; min-width: 0; padding: 20px 16px 24px; border-top: 1px solid var(--line); }
@media (min-width: 700px) { .hw-rail { padding: 28px 32px 32px; } }
@media (min-width: 1100px) { .hw-rail { border-top: 0; border-left: 1px solid var(--line); } }
.hw-static { padding: 20px 16px; font-size: 15px; color: var(--muted); display: grid; gap: 12px; min-width: 0; }
@media (min-width: 700px) { .hw-static { padding: 28px 32px; } }
.hw-static table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hw-static th, .hw-static td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.hw-static th { font-weight: var(--weight); color: var(--dim); font-size: 13px; }
.hw-static .n { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- rail parts */
.hw-tabs { display: flex; flex-wrap: wrap; gap: 0 18px; border-bottom: 1px solid var(--line); }
.hw-tabs button { position: relative; min-height: 36px; padding: 0; border: 0; background: none; font-size: 14px; color: var(--dim); cursor: pointer; }
.hw-tabs button:hover { color: var(--text); }
.hw-tabs button[aria-selected="true"], .hw-tabs button[aria-pressed="true"] { color: var(--text); }
.hw-tabs button[aria-selected="true"]::after, .hw-tabs button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--blue); }
.hw-tabs b { font-weight: var(--weight); font-family: var(--mono); font-size: 12px; color: var(--deep); margin-right: 6px; }
.hw-act { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; background: none; font-size: 14px; color: var(--deep); cursor: pointer; text-decoration: underline; text-decoration-color: var(--pale-line); text-underline-offset: 4px; }
.hw-act:hover { text-decoration-color: currentColor; }
.hw-act[disabled] { color: var(--dim); cursor: default; text-decoration: none; }
.hw-acts { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
.hw-big { font-size: 40px; line-height: 1; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.hw-sub { font-size: 14px; color: var(--muted); margin-top: 6px; }
.hw-out { font-size: 14px; line-height: 1.55; color: var(--muted); min-height: 3.1em; }
.hw-out b { font-weight: var(--weight); color: var(--text); }
.hw-list { display: grid; border-top: 1px solid var(--line); }
.hw-list > li { border-bottom: 1px solid var(--line); }
.hw-li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; width: 100%; min-height: 38px; padding: 8px 0; border: 0; background: none; text-align: left; font-size: 14px; color: var(--muted); cursor: pointer; }
.hw-li:hover, .hw-li[aria-pressed="true"] { color: var(--text); }
.hw-li[aria-pressed="true"] { box-shadow: inset 2px 0 0 var(--blue); padding-left: 10px; }
.hw-li .v { font-family: var(--mono); font-size: 13px; color: var(--deep); font-variant-numeric: tabular-nums; }
.hw-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.hw-key span { display: inline-flex; align-items: center; gap: 7px; }
.hw-key i { width: 9px; height: 9px; flex: none; }
.hw-key i.wire { border: 1px solid var(--hw-wire); }
.hw-key i.dash { border: 1px dashed var(--hw-b3); }
.hw-paths { display: grid; gap: 7px; }
.hw-paths li { display: grid; gap: 1px; min-width: 0; }
.hw-paths code { font-family: var(--mono); font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.hw-paths small { font-size: 12.5px; color: var(--dim); }
.hw-paths li.dup code { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--line-2); }
.hw-lab { position: absolute; transform: translate(-50%, -100%); padding: 1px 4px; background: var(--card); font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; pointer-events: none; }
.hw-lab.l { transform: translate(-100%, -50%); }
.hw-lab.r { transform: translate(0, -50%); }
.hw-lab.c { transform: translate(-50%, -100%); color: var(--dim); }
.hw-lab.on { color: var(--deep); }
.hw-iso-w { position: relative; }
.hw-iso .lead polyline { fill: none; stroke: var(--hw-g1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hw-iso .lead rect { fill: var(--hw-g1); }

/* ---------------------------------------------------------------- 01 map: isometric site */
.hw-iso .cube path { stroke: var(--hw-wire); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: fill .35s ease, stroke .35s ease, opacity .35s ease; }
.hw-iso .cube.ghost path { fill: transparent; stroke: var(--hw-wire-2); }
.hw-iso .cube.dup path { fill: transparent; stroke: var(--hw-b3); stroke-dasharray: 2 2; }
.hw-iso .cube.gone { opacity: 0; }
.hw-iso .ground { stroke: var(--hw-wire-2); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.hw-iso .link { stroke: var(--hw-wire); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.hw-iso .tower.hl .cube:not(.ghost):not(.dup) path { stroke: var(--hw-ink); }
.hw-iso .tower { cursor: pointer; }
.hw-iso .dot { fill: var(--hw-b3); }

/* ---------------------------------------------------------------- 02 watch: contour map */
.hw-cmap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; }
.hw-rows { display: grid; grid-template-rows: repeat(5, 1fr); font-size: 12.5px; color: var(--muted); text-align: right; line-height: 1.15; }
.hw-rows span { display: flex; align-items: center; justify-content: flex-end; max-width: 9.5em; }
.hw-cbox { position: relative; outline-offset: 4px; cursor: crosshair; }
.hw-cbox svg .c { fill: none; stroke: var(--hw-wire); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hw-cbox svg .c.hi { stroke: var(--hw-b3); }
.hw-cbox svg .c.top { stroke: var(--hw-b4); }
.hw-cbox svg .frame { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hw-cbox svg .xh { stroke: var(--text); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 3; }
.hw-cbox svg .scan { stroke: var(--hw-b3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hw-cbox svg .pip { transition: opacity .9s ease; }
.hw-cbox svg .cl { transition: opacity .3s ease; }
.hw-hours { grid-column: 2; display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; min-width: 0; }
@media (max-width: 479px) {
  .hw-cmap { gap: 0 10px; }
  .hw-rows { font-size: 11.5px; }
  .hw-rows span { max-width: 6.5em; }
  .hw-hours span:nth-child(even) { display: none; }
}
.hw-flow { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); min-width: 0; }
.hw-flow-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; margin-bottom: 10px; }
.hw-flow-cap { font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 62ch; }
.hw-flow-cap b { font-weight: var(--weight); color: var(--text); font-variant-numeric: tabular-nums; }
.hw-flow-svg { min-width: 0; }
.hw-flow-svg svg { display: block; overflow: visible; }
.hw-flow-svg .lk { fill: #e7e0d0; fill-opacity: .75; transition: fill .2s ease, fill-opacity .2s ease; }
.hw-flow-svg .lk.c, .hw-flow-svg .lk.z { fill: #d9d1c0; }
.hw-flow-svg .lk.r { fill: #c9c0ad; }
.hw-flow-svg .lk.on { fill: var(--hw-b3); fill-opacity: .5; }
.hw-flow-svg .lk.r.on { fill: var(--hw-b4); fill-opacity: .7; }
.hw-flow-svg .nd { fill: var(--hw-g1); }
.hw-flow-svg .nd.sel { fill: var(--hw-b3); }
.hw-flow-svg .nd.r { fill: var(--hw-b4); }
.hw-flow-svg text { font-family: var(--sans); font-size: 12.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.hw-flow-svg text.on { fill: var(--deep); }
.hw-flow-svg text.r { fill: var(--text); }
.hw-flow-svg text.m { font-size: 12px; fill: var(--dim); }
@media (max-width: 639px) { .hw-flow-svg text { font-size: 11.5px; } }
.hw-sk-l { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; font-size: 13.5px; color: var(--muted); }
.hw-sk-l .v { font-family: var(--mono); font-size: 13px; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 03 detect: diff ribbon */
.hw-ribbon { position: relative; }
.hw-ribbon svg { overflow: visible; }
.hw-ribbon .tk rect { fill: #fff; stroke: var(--hw-wire); stroke-width: 1; transition: fill .35s, stroke .35s, opacity .35s; }
.hw-ribbon .tk text { font-family: var(--sans); font-size: 12px; fill: var(--text); transition: fill .35s, opacity .35s; }
.hw-ribbon .tk.del rect { fill: var(--sand); stroke: var(--hw-g1); }
.hw-ribbon .tk.del text { fill: var(--dim); text-decoration: line-through; }
.hw-ribbon .tk.ins rect { fill: var(--hw-b3); stroke: var(--hw-b3); }
.hw-ribbon .tk.ins text { fill: #fff; }
.hw-ribbon .tk.noise rect { fill: url(#hw-hatch); stroke: var(--hw-wire); stroke-dasharray: 3 2; }
.hw-ribbon .tk.noise text { fill: var(--dim); }
.hw-ribbon .rb { fill: rgba(0, 112, 254, .06); stroke: var(--hw-wire); stroke-width: .75; transition: opacity .4s; }
.hw-ribbon .rb.nz { fill: none; stroke-dasharray: 3 3; }
.hw-ribbon .blk { transition: opacity .4s; }
.hw-ribbon .blk.fade { opacity: .18; }
.hw-ribbon .side { font-family: var(--sans); font-size: 12px; fill: var(--dim); }
.hw-ribbon .scan { fill: var(--hw-b3); }
.hw-text-diff { font-size: 16px; line-height: 1.6; color: var(--text); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.hw-text-diff del { color: var(--dim); text-decoration-color: var(--hw-g1); }
.hw-text-diff ins { text-decoration: none; color: var(--deep); background: var(--pale); box-shadow: inset 0 -1px 0 var(--blue); }
.hw-sw { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; padding: 0; background: none; border: 0; font-size: 14px; color: var(--text); cursor: pointer; }
.hw-sw i { position: relative; width: 28px; height: 16px; border: 1px solid var(--line-2); background: #fff; flex: none; transition: background-color .15s, border-color .15s; }
.hw-sw i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; background: var(--line-2); transition: transform .15s, background-color .15s; }
.hw-sw[aria-checked="true"] i { border-color: var(--blue); }
.hw-sw[aria-checked="true"] i::after { transform: translateX(12px); background: var(--blue); }
.hw-pats { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.hw-pats code { display: block; font-family: var(--mono); font-size: 12px; color: var(--text); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- 04 categorise: sorting machine */
.hw-machine { position: relative; }
.hw-machine .wire { fill: none; stroke: var(--hw-wire); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hw-machine .wire2 { fill: none; stroke: var(--hw-wire-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hw-machine .gate { transition: opacity .2s; }
.hw-machine .gate .wire { transition: stroke .2s; }
.hw-machine .gate.flash .wire { stroke: var(--hw-b3); }
.hw-machine .gate.no .wire { stroke: var(--hw-g1); }
.hw-machine .gate.sel .wire { stroke: var(--hw-ink); }
.hw-machine .item { transition: opacity .3s; }
.hw-gl { position: absolute; transform: translateX(-50%); display: grid; justify-items: center; gap: 0; padding: 4px 6px; border: 0; background: none; font-size: 12.5px; line-height: 1.25; color: var(--muted); text-align: center; cursor: pointer; }
.hw-gl b { font-weight: var(--weight); font-family: var(--mono); font-size: 12px; color: var(--deep); }
.hw-gl .v { font-family: var(--mono); font-size: 12px; color: var(--text); }
.hw-gl:hover, .hw-gl[aria-pressed="true"] { color: var(--text); }
.hw-gl[aria-pressed="true"] { box-shadow: inset 0 -1px 0 var(--blue); }
@media (max-width: 759px) { .hw-gl .nm { display: none; } }
.hw-ex { display: grid; gap: 6px; }
.hw-ex .pg { font-family: var(--mono); font-size: 12.5px; color: var(--dim); overflow-wrap: anywhere; }
.hw-ex p { font-size: 15px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.hw-ex del { color: var(--dim); }
.hw-ex ins { text-decoration: none; color: var(--deep); background: var(--pale); box-shadow: inset 0 -1px 0 var(--blue); }
.hw-ex .hit { outline: 1px solid var(--blue); outline-offset: 0; }
.hw-meta { font-size: 13px; color: var(--dim); }
.hw-meta span.hit { color: var(--deep); box-shadow: inset 0 -1px 0 var(--blue); }
/* highlights get 3 px inside and 3 px clear outside, so a box never touches the next character or
   punctuation (user, 16 Oct). Set on every highlightable span, lit or not, so a highlight never reflows
   the text; horizontal only, so line height is unchanged. */
.hw-ex [data-h], .hw-meta > span { padding: 0 3px; margin: 0 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hw-meta > span:first-child { margin-left: 0; }
.hw-trace { display: grid; gap: 4px; font-size: 14px; }
.hw-trace li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; color: var(--muted); }
.hw-trace li::before { content: "\00d7"; color: var(--dim); }
.hw-trace li.y { color: var(--text); }
.hw-trace li.y::before { content: "\2713"; color: var(--blue); }
.hw-label { font-size: 14px; color: var(--text); }
.hw-label i { display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: 0; }

.hw-machine .gate.hov .wire { stroke: var(--hw-b3); }
.hw-tally { display: grid; gap: 28px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); min-width: 0; }
@media (min-width: 760px) { .hw-tally { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }
.hw-tally-h { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text); margin-bottom: 10px; }
.hw-tally-h .v { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.hw-hits { display: grid; }
.hw-hits li { display: grid; grid-template-columns: 26px minmax(0, 9em) minmax(0, 1fr) 3ch; gap: 10px; align-items: center; min-height: 30px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.hw-hits li.hov { color: var(--text); }
.hw-hits b { font-weight: var(--weight); font-family: var(--mono); font-size: 12px; color: var(--deep); }
.hw-hits .nm { overflow-wrap: anywhere; line-height: 1.25; }
.hw-hits .bar { position: relative; height: 9px; }
.hw-hits .bar i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .4s ease; box-sizing: border-box; }
.hw-hits .v { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.hw-stack { display: flex; height: 18px; border: 1px solid var(--line-2); background: #fff; }
.hw-stack span { display: block; height: 100%; transition: width .4s ease; min-width: 0; }
.hw-stack span + span { box-shadow: inset 1px 0 0 #fff; }
.hw-cats { display: grid; gap: 2px; margin-top: 12px; }
.hw-cats li { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 26px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.hw-cats i { width: 9px; height: 9px; }
.hw-cats .v { color: var(--text); font-variant-numeric: tabular-nums; }
.hw-note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .hw-hits .bar i, .hw-stack span, .hw-flow-svg .lk { transition: none; } }

/* ---------------------------------------------------------------- 05 deliver: feed */
.hw-feed { position: relative; display: grid; gap: 12px; max-width: 640px; margin: 0 auto; }
.hw-feed .cardx { position: relative; display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--line-2); background: #fff; min-width: 0; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; }
.hw-feed .cardx.new { border-color: var(--text); }
.hw-feed .cardx.drop { transform: translateY(-48px); opacity: 0; }
.hw-feed .skel { display: grid; gap: 9px; padding: 16px 18px; border: 1px solid var(--hw-wire-2); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.hw-feed .skel i { display: block; height: 7px; border: 1px solid var(--hw-wire-2); }
.hw-feed .skel i:nth-child(1) { width: 34%; } .hw-feed .skel i:nth-child(2) { width: 82%; } .hw-feed .skel i:nth-child(3) { width: 58%; }
.hw-feed .slot { display: grid; place-items: center; min-height: 132px; border: 1px dashed var(--hw-wire); font-size: 13.5px; color: var(--dim); }
.hw-feed .push .skel, .hw-feed.push .skel { transform: translateY(0); }
.hw-feed .top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.hw-feed .clock { font-family: var(--mono); font-size: 13px; color: var(--deep); }
.hw-feed .co { font-size: 16px; color: var(--text); }
.hw-feed .pg { font-family: var(--mono); font-size: 12.5px; color: var(--dim); overflow-wrap: anywhere; }
.hw-feed .ba { font-size: 15px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.hw-feed .ba s { color: var(--dim); }
.hw-feed .ba ins { text-decoration: none; color: var(--deep); background: var(--pale); box-shadow: inset 0 -1px 0 var(--blue); }
.hw-feed .lbl { font-size: 13.5px; color: var(--muted); }
.hw-feed .lbl i { display: inline-block; width: 9px; height: 9px; margin-right: 7px; background: var(--hw-b1); }
.hw-feed .links { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13.5px; }
.hw-feed .links span { color: var(--deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pale-line); }
.hw-feed .mail { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 3px 12px; font-size: 13.5px; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.hw-feed .mail span:nth-child(even) { color: var(--text); overflow-wrap: anywhere; }
.hw-json { margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.hw-json .k { color: var(--deep); }
.hw-json .s { color: var(--muted); }
.hw-tl { display: grid; }
.hw-tl li { position: relative; }
.hw-tl .ln { position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: var(--hw-wire); }
.hw-tl li:first-child .ln { top: 14px; } .hw-tl li:last-child .ln { bottom: calc(100% - 14px); }
.hw-tl .sq { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 7px; border: 1px solid var(--hw-wire); background: var(--hw-panel); transition: background-color .25s, border-color .25s; }
.hw-tl li.done .sq { background: var(--hw-b3); border-color: var(--hw-b3); }
.hw-tl li.sel .sq { outline: 1px solid var(--text); outline-offset: 2px; }
.hw-tl .t { padding: 6px 0; font-size: 14px; color: var(--muted); }
.hw-tl li.done .t { color: var(--text); }
.hw-tl .s { font-family: var(--mono); font-size: 12.5px; color: var(--deep); font-variant-numeric: tabular-nums; }
.hw-tl-b { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .hw-feed .cardx.drop { transform: none; opacity: 1; }
}

/* ================================================================ v4 (15 Oct, evening): compact stepper
   With JavaScript the five steps sit in one app window (the same frame and window as the dashboard
   demo: .fr from demo.css, a title bar, hairlines, 7 px corners), one step at a time behind a row of
   step tabs. Each step is a narrow text column beside a small figure and its controls. Without
   JavaScript all five steps stay stacked, each with its static fallback. */
.hw-resp { margin-top: 10px; max-width: 64ch; font-size: 15px; line-height: 1.55; color: var(--text); }
.hw-resp::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; background: var(--blue); vertical-align: 1px; }
.hw-fr { margin-top: 28px; }
.hw-app { position: relative; border: 1px solid #b9ac93; border-radius: 7px; background: var(--card); font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 1px 2px rgba(45, 34, 14, .14), 0 12px 26px -16px rgba(45, 34, 14, .45); }
.hw-step { padding-top: 40px; }
@media (min-width: 1100px) { .hw-step { padding-top: 48px; } }
.hw-app .hw-step:first-child { padding-top: 20px; }

.hw-tabbed .hw-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #fbf8f1; border-radius: 7px 7px 0 0; font-size: 12px; color: var(--muted); }
.hw-tabbed .hw-dots { display: inline-flex; gap: 5px; }
.hw-tabbed .hw-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg); }
.hw-tabbed .hw-bar-t { color: var(--text); min-width: 0; }
.hw-tabbed .hw-bar-s { margin-left: auto; color: var(--dim); }
@media (max-width: 479px) { .hw-tabbed .hw-bar-t { display: none; } }

.hw-tabbed .hw-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.hw-tabbed .hw-nav button { display: grid; align-content: start; gap: 2px; min-width: 0; min-height: 44px; padding: 9px 12px 10px; border: 0; border-left: 1px solid var(--line); background: none; text-align: left; cursor: pointer; color: var(--muted); }
.hw-tabbed .hw-nav button:first-child { border-left: 0; }
.hw-tabbed .hw-nav button:hover { background: #fffdf8; color: var(--text); }
.hw-tabbed .hw-nav button[aria-selected="true"] { background: #fff; color: var(--text); box-shadow: inset 0 -2px 0 var(--blue); }
.hw-tabbed .hw-nav .n { font-family: var(--mono); font-size: 11.5px; color: var(--deep); font-variant-numeric: tabular-nums; }
.hw-tabbed .hw-nav .t { font-size: 14px; line-height: 1.25; }
.hw-tabbed .hw-nav .d { font-size: 12px; line-height: 1.35; color: var(--dim); }
@media (max-width: 1099px) { .hw-tabbed .hw-nav .d { display: none; } }
@media (max-width: 559px) { .hw-tabbed .hw-nav button { padding: 8px 4px; text-align: center; justify-items: center; } .hw-tabbed .hw-nav .t { font-size: 12px; } }

.hw-tabbed .hw-step { padding: 0; scroll-margin-top: 72px; }
.hw-tabbed .hw-step[hidden] { display: none; }
@media (min-width: 1100px) { .hw-tabbed .hw-step { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); } }
.hw-tabbed .hw-head { display: block; margin: 0; padding: 18px 16px 16px; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .hw-tabbed .hw-head { padding: 22px 22px 20px; } }
@media (min-width: 1100px) { .hw-tabbed .hw-head { border-bottom: 0; border-right: 1px solid var(--line); } }
.hw-tabbed .hw-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.hw-tabbed .hw-title h4 { font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; max-width: none; }
.hw-tabbed .hw-head > p { font-size: 14px; line-height: 1.55; max-width: 60ch; }
.hw-tabbed .hw-next { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; }
.hw-tabbed .hw-fig { border-top: 0; background: transparent; }
@media (min-width: 1100px) {
  .hw-tabbed .hw-live, .hw-tabbed .hw-step:nth-child(even) .hw-live { grid-template-columns: minmax(0, 1fr) minmax(0, 250px); }
  .hw-tabbed .hw-step:nth-child(even) .hw-rail { order: 0; border-right: 0; border-left: 1px solid var(--line); }
}
.hw-tabbed .hw-draw { padding: 16px; }
@media (min-width: 700px) { .hw-tabbed .hw-draw { padding: 18px 22px; } }
.hw-tabbed .hw-rail { gap: 12px; padding: 16px 16px 18px; }
@media (min-width: 700px) { .hw-tabbed .hw-rail { padding: 18px 18px 20px; } }
.hw-tabbed .hw-tabs { gap: 0 14px; }
.hw-tabbed .hw-tabs button { min-height: 30px; font-size: 13px; }
.hw-tabbed .hw-big { font-size: 30px; }
.hw-tabbed .hw-sub, .hw-tabbed .hw-out { font-size: 13px; }
.hw-tabbed .hw-out { min-height: 0; }
.hw-tabbed .hw-li { min-height: 28px; padding: 4px 0; font-size: 13px; }
.hw-tabbed .hw-li .v { font-size: 12px; }
.hw-tabbed .hw-key { font-size: 12px; gap: 4px 12px; }
.hw-tabbed .hw-paths { gap: 4px; }
.hw-tabbed .hw-paths code, .hw-tabbed .hw-paths small { font-size: 12px; }
.hw-tabbed .hw-act { min-height: 28px; font-size: 13px; }
.hw-tabbed .hw-flow { margin-top: 14px; padding-top: 12px; }
.hw-tabbed .hw-flow-cap { font-size: 13px; }
.hw-tabbed .hw-text-diff { font-size: 14px; margin-top: 12px; padding-top: 10px; }
.hw-tabbed .hw-pats { font-size: 12px; }
.hw-tabbed .hw-ex p { font-size: 14px; }
.hw-tabbed .hw-trace { font-size: 13px; }
.hw-tabbed .hw-label { font-size: 13px; }
.hw-tabbed .hw-tally { margin-top: 4px; padding-top: 12px; grid-template-columns: none; }
.hw-tabbed .hw-cats { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 8px; }
.hw-tabbed .hw-cats li { grid-template-columns: 9px auto auto; gap: 6px; min-height: 22px; border-bottom: 0; font-size: 12.5px; }
.hw-tabbed .hw-note { margin-top: 6px; font-size: 12px; }
.hw-tabbed .hw-tally-h { font-size: 13px; margin-bottom: 8px; }
.hw-tabbed .hw-feed { max-width: 560px; gap: 10px; }
.hw-tabbed .hw-feed .cardx { padding: 12px 14px; border-radius: 4px; border-color: var(--line-2); box-shadow: inset 3px 0 0 var(--c-product, #00b3fe); }
.hw-tabbed .hw-feed .skel, .hw-tabbed .hw-feed .slot { border-radius: 4px; }
.hw-tabbed .hw-feed .slot { min-height: 96px; }
.hw-tabbed .hw-feed .ba { font-size: 14px; }
.hw-tabbed .hw-tl .t { padding: 4px 0; font-size: 13px; }
.hw-tabbed .hw-tl .sq { margin-top: 5px; }
.hw-tabbed .hw-tl li:first-child .ln { top: 11px; } .hw-tabbed .hw-tl li:last-child .ln { bottom: calc(100% - 11px); }
/* example changes in step 04 as compact chips */
.hw-chips { display: flex; flex-wrap: wrap; gap: 6px; border-top: 0; }
.hw-chips > li { border-bottom: 0; }
.hw-chips .hw-li { display: inline-flex; gap: 6px; width: auto; min-height: 28px; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 4px; background: #fff; }
.hw-chips .hw-li[aria-pressed="true"] { padding-left: 8px; border-color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); }

.hw-tabbed .hw-gl .nm { display: none; }
.hw:not(.hw-tabbed) .hw-app { padding: 0 16px 24px; }
@media (min-width: 700px) { .hw:not(.hw-tabbed) .hw-app { padding: 0 24px 28px; } }

/* ================================================================ v4b (15 Oct, evening): smaller, flat, on a grid
   The window is narrower than the column and sits on flat cream (no frame); the figure column is at
   most 440 px, so space is left on the right. 1 px hairlines, spacing in steps of 8 px, labels on a
   cream ground so geometry never covers them. */
.hw-fr { margin-top: 24px; }
.hw-app { box-shadow: none; border-color: var(--line-2); border-radius: 6px; background: var(--card); }
.hw-tabbed .hw-app { max-width: 980px; }
.hw-tabbed .hw-bar { padding: 8px 16px; border-radius: 6px 6px 0 0; }
.hw-tabbed .hw-nav button { padding: 8px 16px; }
@media (max-width: 559px) { .hw-tabbed .hw-nav button { padding: 8px 4px; } }
@media (min-width: 1100px) {
  .hw-tabbed .hw-step { grid-template-columns: 264px minmax(0, 1fr); }
  .hw-tabbed .hw-live, .hw-tabbed .hw-step:nth-child(even) .hw-live { grid-template-columns: minmax(0, 1fr) 272px; }
}
.hw-tabbed .hw-head { padding: 24px 16px 16px; }
@media (min-width: 700px) { .hw-tabbed .hw-head { padding: 24px; } }
.hw-tabbed .hw-title { margin-bottom: 8px; }
.hw-tabbed .hw-next { margin-top: 16px; gap: 0 16px; }
.hw-tabbed .hw-draw { padding: 24px 16px; }
@media (min-width: 700px) { .hw-tabbed .hw-draw { padding: 24px; } }
.hw-tabbed .hw-draw > * { width: 100%; max-width: 440px; }
.hw-tabbed .hw-iso-w { max-width: 380px; }
.hw-tabbed .hw-rail { gap: 16px; padding: 24px 16px; }
@media (min-width: 700px) { .hw-tabbed .hw-rail { padding: 24px 20px; } }
.hw-tabbed .hw-feed { max-width: 440px; margin: 0; }
.hw-tabbed .hw-flow { margin-top: 16px; padding-top: 16px; }
.hw-flow-svg text { paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
.hw-tabbed .hw-text-diff { font-size: 13px; line-height: 1.5; }

/* ================================================================ v4c (15 Oct, evening): about 20% larger on desktop
   From 1100 px the window grows to at most 1180 px (always leaving 24 px or more on the right), the
   figure to at most 530 px, and type, controls and columns by about a fifth. Phones are unchanged. */
@media (min-width: 1100px) {
  .hw-tabbed .hw-app { max-width: min(1180px, calc(100% - 24px)); }
  .hw-tabbed .hw-bar { font-size: 13.5px; padding: 10px 20px; }
  .hw-tabbed .hw-dots i { width: 10px; height: 10px; }
  .hw-tabbed .hw-nav button { padding: 10px 20px 12px; gap: 3px; }
  .hw-tabbed .hw-nav .n { font-size: 13px; }
  .hw-tabbed .hw-nav .t { font-size: 16.5px; }
  .hw-tabbed .hw-nav .d { font-size: 13.5px; }
  .hw-tabbed .hw-step { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .hw-tabbed .hw-live, .hw-tabbed .hw-step:nth-child(even) .hw-live { grid-template-columns: minmax(0, 1fr) minmax(0, 312px); }
  .hw-tabbed .hw-head { padding: 28px; }
  .hw-tabbed .hw-title { margin-bottom: 10px; gap: 12px; }
  .hw-tabbed .hw-title h4 { font-size: 25px; }
  .hw-tabbed .hw-n { font-size: 15px; }
  .hw-tabbed .hw-head > p { font-size: 16px; line-height: 1.6; }
  .hw-tabbed .hw-next { margin-top: 20px; gap: 0 20px; }
  .hw-tabbed .hw-draw { padding: 28px; }
  .hw-tabbed .hw-draw > * { max-width: 530px; }
  .hw-tabbed .hw-iso-w { max-width: 456px; }
  .hw-tabbed .hw-feed { max-width: 530px; }
  .hw-tabbed .hw-rail { gap: 18px; padding: 28px 24px; }
  .hw-tabbed .hw-tabs { gap: 0 16px; }
  .hw-tabbed .hw-tabs button { min-height: 36px; font-size: 15px; }
  .hw-tabbed .hw-tabs b { font-size: 13.5px; }
  .hw-tabbed .hw-big { font-size: 36px; }
  .hw-tabbed .hw-sub, .hw-tabbed .hw-out { font-size: 15px; }
  .hw-tabbed .hw-li { min-height: 34px; padding: 5px 0; font-size: 15px; }
  .hw-tabbed .hw-li .v { font-size: 14px; }
  .hw-tabbed .hw-key { font-size: 14px; gap: 5px 14px; }
  .hw-tabbed .hw-key i { width: 10px; height: 10px; }
  .hw-tabbed .hw-paths code, .hw-tabbed .hw-paths small { font-size: 14px; }
  .hw-tabbed .hw-act { min-height: 34px; font-size: 15px; }
  .hw-lab { font-size: 14px; line-height: 18px; }
  .hw-tabbed .hw-rows { font-size: 14px; }
  .hw-tabbed .hw-rows span { max-width: 10em; }
  .hw-tabbed .hw-hours { font-size: 13.5px; }
  .hw-tabbed .hw-flow { margin-top: 20px; padding-top: 20px; }
  .hw-tabbed .hw-flow-cap { font-size: 15px; }
  .hw-flow-svg text { font-size: 14px; }
  .hw-flow-svg text.m { font-size: 13.5px; }
  .hw-tabbed .hw-text-diff { font-size: 15.5px; }
  .hw-tabbed .hw-pats { font-size: 14px; }
  .hw-tabbed .hw-pats code { font-size: 13.5px; }
  .hw-tabbed .hw-sw { font-size: 15px; }
  .hw-tabbed .hw-sw i { width: 32px; height: 18px; }
  .hw-tabbed .hw-sw i::after { width: 12px; height: 12px; }
  .hw-tabbed .hw-sw[aria-checked="true"] i::after { transform: translateX(14px); }
  .hw-tabbed .hw-chips .hw-li { min-height: 34px; padding: 4px 10px; font-size: 14.5px; }
  .hw-tabbed .hw-ex p { font-size: 16px; }
  .hw-tabbed .hw-ex .pg, .hw-tabbed .hw-meta { font-size: 14px; }
  .hw-tabbed .hw-trace { font-size: 15px; }
  .hw-tabbed .hw-label { font-size: 15px; }
  .hw-tabbed .hw-gl { font-size: 14px; }
  .hw-tabbed .hw-gl b, .hw-tabbed .hw-gl .v { font-size: 14px; }
  .hw-tabbed .hw-tally { margin-top: 6px; padding-top: 16px; }
  .hw-tabbed .hw-tally-h { font-size: 15px; margin-bottom: 10px; }
  .hw-tabbed .hw-tally-h .v { font-size: 14px; }
  .hw-tabbed .hw-stack { height: 22px; }
  .hw-tabbed .hw-cats li { font-size: 14.5px; min-height: 26px; grid-template-columns: 10px auto auto; }
  .hw-tabbed .hw-cats i { width: 10px; height: 10px; }
  .hw-tabbed .hw-note { font-size: 14px; }
  .hw-tabbed .hw-feed .cardx { padding: 16px 18px; gap: 10px; }
  .hw-tabbed .hw-feed .clock { font-size: 15px; }
  .hw-tabbed .hw-feed .co { font-size: 18px; }
  .hw-tabbed .hw-feed .pg { font-size: 14px; }
  .hw-tabbed .hw-feed .ba { font-size: 16.5px; }
  .hw-tabbed .hw-feed .lbl, .hw-tabbed .hw-feed .links, .hw-tabbed .hw-feed .mail { font-size: 15px; }
  .hw-tabbed .hw-feed .slot { min-height: 116px; font-size: 15px; }
  .hw-tabbed .hw-json { font-size: 14px; }
  .hw-tabbed .hw-tl .t { padding: 5px 0; font-size: 15px; }
  .hw-tabbed .hw-tl .s { font-size: 14px; }
  .hw-tabbed .hw-tl .sq { width: 13px; height: 13px; margin-top: 7px; }
  .hw-tabbed .hw-tl .ln { left: 6px; }
  .hw-tabbed .hw-tl-b { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .hw-ribbon .tk text { font-size: 14px; }
}

/* ================================================================ v5 (15 Oct, evening): a row of step cards over one fixed window
   Five tall cards, each a faint line drawing in the figures' own language, a two-tone headline at the
   bottom left (dark key phrase, grey rest) and "See it". The chosen step opens in the window below,
   which keeps the height of its tallest step (set by how.js), so nothing on the page moves. */
.hw-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .hw-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1100px) { .hw-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: min(1180px, calc(100% - 24px)); } }
.hw-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 176px; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); overflow: hidden; }
@media (min-width: 760px) { .hw-card { min-height: 236px; padding: 16px; } }
@media (min-width: 1100px) { .hw-card { min-height: 268px; padding: 18px; } }
.hw-tabbed .hw-card { cursor: pointer; transition: border-color .2s ease; }
.hw-tabbed .hw-card:hover { border-color: var(--line-2); }
.hw-tabbed .hw-card.on { border-color: var(--text); }
.hw-card-art { position: absolute; left: 0; top: 0; width: 100%; height: 58%; pointer-events: none; }
.hw-card-art path { fill: none; vector-effect: non-scaling-stroke; stroke-width: 1; }
.hw-card-art .w { stroke: #d2c8b3; }
.hw-card-art .g { stroke: #e3dbca; }
.hw-card-art .a { fill: var(--blue); }
.hw-card-art .a2 { stroke: var(--blue); stroke-opacity: .45; }
.hw-card.on .hw-card-art .w { stroke: #bfb49c; }
.hw-card-n { position: absolute; left: 14px; top: 12px; font-family: var(--mono); font-size: 12px; color: var(--deep); font-variant-numeric: tabular-nums; }
@media (min-width: 760px) { .hw-card-n { left: 16px; top: 14px; } }
.hw-card-txt { position: relative; }
.hw-card-h { font-size: 15px; line-height: 1.3; letter-spacing: -0.005em; color: var(--dim); }
@media (min-width: 1100px) { .hw-card-h { font-size: 16.5px; } }
.hw-card-h .k { color: var(--text); }
@media (max-width: 559px) { .hw-card-h .r { display: none; } }
.hw-card-go { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; margin-top: 8px; padding: 0; border: 0; background: none; font-size: 14px; color: var(--deep); text-decoration: none; cursor: pointer; }
.hw-card-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.hw-card.on .hw-card-go { color: var(--text); }
/* the window under the cards */
.hw-tabbed .hw-fr { margin-top: 12px; }
.hw-tabbed .hw-steps { position: relative; overflow: hidden; }
.hw-lab, .hw-lab.l, .hw-lab.r { background: none; padding: 0; }
.hw-lab.b { transform: translate(-50%, 0); color: var(--dim); }
.hw-paths li.ph { visibility: hidden; }
.hw-tabbed .hw-out { min-height: 4.7em; }
/* v5 height budget: denser controls in the window so the tallest step stays near 560 px at 1440 */
@media (min-width: 1100px) {
  .hw-card { min-height: 196px; }
  .hw-tabbed .hw-rail { gap: 14px; padding: 22px 22px; }
  .hw-tabbed .hw-draw { padding: 22px 26px; }
  .hw-tabbed .hw-head { padding: 22px 26px; }
  .hw-tabbed .hw-tabs { gap: 0 12px; }
  .hw-tabbed .hw-tabs button { min-height: 30px; font-size: 14px; }
  .hw-tabbed .hw-tabs b { font-size: 12.5px; margin-right: 4px; }
  .hw-tabbed .hw-big { font-size: 32px; }
  .hw-tabbed .hw-sub, .hw-tabbed .hw-out { font-size: 14px; }
  .hw-tabbed .hw-li { min-height: 29px; padding: 3px 0; font-size: 14px; }
  .hw-tabbed .hw-key { font-size: 13px; gap: 3px 12px; }
  .hw-tabbed .hw-paths code, .hw-tabbed .hw-paths small { font-size: 13px; }
  .hw-tabbed .hw-act { min-height: 30px; font-size: 14px; }
  .hw-tabbed .hw-chips { gap: 5px; }
  .hw-tabbed .hw-chips .hw-li { min-height: 30px; padding: 2px 8px; font-size: 13.5px; }
  .hw-tabbed .hw-ex p { font-size: 15px; }
  .hw-tabbed .hw-trace, .hw-tabbed .hw-label { font-size: 14px; }
  .hw-tabbed .hw-tl .t { padding: 3px 0; font-size: 14px; }
  .hw-tabbed .hw-next { margin-top: 14px; }
  .hw-tabbed .hw-flow { margin-top: 14px; padding-top: 14px; }
  .hw-tabbed .hw-flow-cap { font-size: 14px; }
  .hw-tabbed .hw-text-diff { font-size: 14.5px; }
}
/* the window's title bar names the step, so the step's own heading is kept for screen readers only */
@media (min-width: 1100px) { .hw-tabbed .hw-head > p { font-size: 15.5px; } }
.hw-tabbed .hw-sub { min-height: 2.9em; }
/* cards: number, then the drawing in its own band, then the headline, so the art never sits under text */
.hw-card { justify-content: flex-start; gap: 10px; }
.hw-card-n { position: static; }
.hw-card-art { position: static; flex: 1 1 auto; width: 100%; height: auto; min-height: 64px; max-height: 120px; }
@media (min-width: 1100px) { .hw-card-art { min-height: 70px; } }
.hw-card-txt { margin-top: auto; }
.hw-card { min-height: 0; }
.hw-card-art { flex: none; height: 64px; min-height: 0; max-height: none; }
@media (min-width: 1100px) { .hw-card { min-height: 0; } .hw-card-art { height: 72px; min-height: 0; } }
@media (min-width: 1100px) { .hw-tabbed #how-1 .hw-tabs { gap: 0 10px; } .hw-tabbed #how-1 .hw-tabs button { font-size: 13.5px; } }
@media (min-width: 1100px) { .hw-card { padding: 14px 16px; gap: 8px; } .hw-card-art { height: 58px; } }
/* step 04: one line of instruction and room for the longest example, so clicking an example never grows the step */
.hw-tabbed .hw-sub.hw-sub1 { min-height: 0; }
@media (min-width: 1100px) { .hw-tabbed #how-4 .hw-out { min-height: 0; } .hw-tabbed #how-4 .hw-rail { gap: 10px; } .hw-tabbed #how-4 .hw-ex p { font-size: 14px; } .hw-tabbed #how-4 .hw-trace, .hw-tabbed #how-4 .hw-label, .hw-tabbed #how-4 .hw-out { font-size: 13.5px; } .hw-tabbed #how-4 .hw-chips .hw-li { min-height: 28px; font-size: 13px; } }
.hw-next [hidden] { display: none; }
@media (min-width: 1100px) { .hw-card-art { height: 80px; } .hw-lede { max-width: 72ch; } }
.hw-card-art .s { fill: var(--card); }

/* ---------------------------------------------------------------- v6 (15 Oct 19:4x): plain panel, small
   step 02 funnel (corner label and progress lines removed 16-17 Oct) */
.hw-tabbed .hw-bar { display: none; }
.hw-tabbed .hw-app { border: 1px solid var(--line-2); border-radius: 6px; }
.hw-tabbed .hw-fig { position: relative; }
.hw-fun { display: grid; gap: 8px; }
.hw-fun-r { display: grid; grid-template-columns: minmax(0, 1fr) 52px; grid-template-areas: "l v" "b b"; gap: 4px 12px; align-items: baseline; }
@media (min-width: 700px) { .hw-fun-r { grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 56px; grid-template-areas: "l b v"; align-items: center; } }
.hw-fun-r .l { grid-area: l; font-size: 13px; line-height: 1.35; color: var(--muted); }
.hw-fun-r .b { grid-area: b; position: relative; height: 10px; background: #efe9dc; }
.hw-fun-r .b i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--text); transition: width .3s ease; }
.hw-fun-skip .b i { background: #b9b1a1; }
.hw-fun-cmp .b i { background: var(--deep); }
.hw-fun-chg .b i { background: var(--blue); }
.hw-fun-chg .l { color: var(--text); }
.hw-fun-r .v { grid-area: v; font-family: var(--mono); font-size: 13px; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
@media (min-width: 1100px) { .hw-fun-r .l, .hw-fun-r .v { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .hw-fun-r .b i { transition: none; } }
.hw-tabbed .hw-flow-cap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hw-tabs button, .hw-li, .hw-sw { position: relative; }
/* selection and focus clear of the text (user 20:0x): rows have inner padding, the selected row a
   pale blue ground and a 2 px rule, and every control a focus ring 3 px outside it */
.hw-tabbed .hw-list .hw-li { padding: 4px 8px; }
.hw-tabbed .hw-list .hw-li[aria-pressed="true"] { padding-left: 8px; box-shadow: inset 2px 0 0 var(--blue); background: rgba(0, 112, 254, .06); }
.hw-tabbed .hw-tabs { gap: 0 4px; }
.hw-tabbed .hw-tabs button { padding: 0 5px; }
.hw-tabbed .hw-tabs button:first-child { margin-left: -5px; }
.hw button:focus-visible, .hw [tabindex]:focus-visible, .hw a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.hw-tabbed .hw-steps .hw-list .hw-li:focus-visible { outline-offset: 2px; }
.hw-tabbed .hw-gl { padding: 4px 8px; }
@media (min-width: 1100px) { .hw-tabbed .hw-tabs { gap: 0 4px; } .hw-tabbed .hw-tabs button { padding: 0 3px; } .hw-tabbed .hw-tabs button:first-child { margin-left: -3px; } .hw-tabbed #how-1 .hw-tabs { gap: 0 2px; } }

/* ================================================================ v7 (16 Oct): clean fades, plain sweep in step 02,
   the "what it is" statement and tiles inside How it works, and the purpose section (#why, prefix pu-) */
/* the section opens with the statement and the two tiles, then the five steps under their own heading */
.hw .sec-head h2.statement { max-width: 34ch; font-size: clamp(22px, 2.8vw, 32px); line-height: 1.25; letter-spacing: -0.02em; }
.hw .tiles.hw-tiles { margin-top: 20px; }
.hw-sub-head { display: grid; gap: 6px; margin-top: 56px; }
@media (min-width: 1100px) { .hw-sub-head { margin-top: 72px; } }
.hw-h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.02em; max-width: 30ch; }
/* cross-fades: the frozen copy laid over the live element (how.js dissolve) */
.hw-ghost { position: absolute !important; z-index: 3; margin: 0 !important; background: var(--card); pointer-events: none; opacity: 1; transition: opacity .42s cubic-bezier(.4, 0, .2, 1); overflow: hidden; border-radius: 0 0 5px 5px; }
/* everything else that changes state fades over the same 350 ms */
.hw-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--blue); opacity: 0; transition: opacity .35s ease; }
.hw-tabs button[aria-selected="true"]::after, .hw-tabs button[aria-pressed="true"]::after { opacity: 1; }
.hw-tabs button, .hw-li, .hw-gl, .hw-tl .t, .hw-act { transition: color .35s ease, background-color .35s ease, box-shadow .35s ease; }
.hw-tabbed .hw-card { transition: border-color .35s ease; }
.hw-machine .gate .wire { transition: stroke .35s ease; }
/* step 02: a plain sweep on a neutral panel; the day's pick-ups as a faint scatter, live ones bright then fading */
.hw-cbox svg.hw-sweep { overflow: hidden; background: #fffefb; }
.hw-sweep .frame { fill: none; stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hw-sweep .lane { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hw-sweep .hr { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1 5; }
.hw-sweep .cell { fill: rgba(0, 112, 254, .05); transition: transform .35s ease; }
.hw-sweep .xh { stroke: var(--text); stroke-opacity: .55; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 3; transition: transform .35s ease; }
.hw-sweep .scan { stroke: var(--hw-b3); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hw-sweep .seen .pip { opacity: .3; }
.hw-sweep .ping { fill: none; stroke: var(--hw-b3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hw-sweep .ping.big { stroke-width: 1.5; }
.hw-sweep .pip.live { transition: opacity 1.6s ease-in; }
.hw-sweep .pip.live .ping { transform-box: fill-box; transform-origin: center; transition: transform 1.2s ease-out; }
.hw-sweep .pip.live.out { opacity: 0; }
.hw-sweep .pip.live.out .ping { transform: scale(1.8); }
.hw-key i.ring { width: 11px; height: 11px; border: 1.5px solid var(--hw-b3); border-radius: 50%; background: radial-gradient(circle, var(--hw-b3) 0 2.5px, transparent 3px); }
@media (prefers-reduced-motion: reduce) { .hw-sweep .cell, .hw-sweep .xh { transition: none; } }

/* ---------------------------------------------------------------- purpose section (#why) */
.pu .sec-head h2.statement { max-width: 34ch; font-size: clamp(22px, 2.8vw, 32px); line-height: 1.25; letter-spacing: -0.02em; }
.pu-tiles { display: grid; gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .pu-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .pu-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pu-tile { min-width: 0; }
.pu-art { width: 100%; height: auto; margin: 0 0 12px; overflow: visible; }
.pu-art path, .pu-art rect, .pu-art circle { vector-effect: non-scaling-stroke; }
.pu-w { fill: none; stroke: var(--line-2); stroke-width: 1; }
.pu-g { fill: none; stroke: #d2c8b3; stroke-width: 1; }
.pu-l { fill: none; stroke: var(--blue); stroke-width: 1.25; }
.pu-a { fill: var(--blue); }
.pu-d { fill: var(--deep); }
.pu-o { fill: var(--card); stroke: #bfb49c; stroke-width: 1; }
.pu-hl { fill: var(--pale); stroke: var(--blue); stroke-width: 1.25; }
.pu-ring { fill: none; stroke: var(--blue); stroke-width: 1.25; }
.pu-band { fill: var(--pale); }
.pu-card { fill: #fff; stroke: var(--line-2); stroke-width: 1; }
.pu-card.pu-q { stroke-dasharray: 3 3; fill: none; }
.pu-bar { fill: #e7e0d0; }
.pu-del { fill: #d9d1c0; }
.pu-x { fill: none; stroke: var(--dim); stroke-width: 1.25; }
.pu-chip { fill: #fff; stroke: var(--line-2); stroke-width: 1; }
.pu-chip-k { stroke: var(--blue); }
.pu-t { font-family: var(--sans); font-size: 12.5px; fill: var(--muted); }
.pu-t.pu-k { fill: var(--deep); }
.pu-t.pu-s { fill: var(--dim); font-size: 12px; }
.pu-tile h3 { font-size: 20px; letter-spacing: -0.015em; line-height: 1.3; }
.pu-tile p { color: var(--muted); max-width: 52ch; }
.pu-note { margin-top: 24px; font-size: 15px; color: var(--muted); }
.pu-note::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; background: var(--blue); vertical-align: 1px; }
.pu-note a { color: var(--deep); text-underline-offset: 3px; }

/* ================================================================ v8 (16 Oct): one content width for the whole
   section (the same right edge as every other section: the main column, at most 1160 px) */
.hw .tiles.hw-tiles, .hs, .hw-tabbed .hw-cards, .hw-tabbed .hw-app { max-width: none; }

/* the story of one change under the statement (prefix hs-): watch, then detect, then record, on an
   example page. Every state is laid out from the start (fixed heights; words are wiped in by
   max-width inside a reserved line box), so nothing around it moves. data-st on .hs: 1 watch,
   2 detect, 3 record (the markup default, for no JS and reduced motion). */
.hs { margin-top: 28px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--card); padding: 18px; }
@media (min-width: 760px) { .hs { padding: 22px 24px 24px; } }
.hs-rail { list-style: none; margin: 0; padding: 0 0 52px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; position: relative; }
@media (min-width: 760px) { .hs-rail { padding-bottom: 0; gap: 0 24px; } }
.hs-st { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding-top: 12px; border-top: 2px solid var(--line); transition: border-color .45s ease; cursor: pointer; }
.hs-st .n { grid-row: span 2; width: 24px; height: 24px; display: inline-grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; font-size: 12px; color: var(--dim); background: var(--card); transition: background-color .45s ease, border-color .45s ease, color .45s ease; align-self: start; }
.hs-st .k { font-size: 17px; letter-spacing: -0.01em; color: var(--dim); transition: color .45s ease; }
.hs-st .d { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
@media (max-width: 759px) {
  .hs-st .n { grid-row: auto; }
  .hs-st .d { position: absolute; left: 0; right: 0; top: 50px; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
  .hs[data-st="1"] .hs-st[data-s="1"] .d, .hs[data-st="2"] .hs-st[data-s="2"] .d, .hs[data-st="3"] .hs-st[data-s="3"] .d { opacity: 1; }
}
.hs[data-st="1"] .hs-st[data-s="1"], .hs[data-st="2"] .hs-st[data-s="2"], .hs[data-st="3"] .hs-st[data-s="3"] { border-top-color: var(--blue); }
.hs[data-st="1"] .hs-st[data-s="1"] .n, .hs[data-st="2"] .hs-st[data-s="2"] .n, .hs[data-st="3"] .hs-st[data-s="3"] .n { background: var(--blue); border-color: var(--blue); color: #fff; }
.hs[data-st="1"] .hs-st[data-s="1"] .k, .hs[data-st="2"] .hs-st[data-s="2"] .k, .hs[data-st="3"] .hs-st[data-s="3"] .k { color: var(--text); }
.hs[data-st="2"] .hs-st[data-s="1"] .n, .hs[data-st="3"] .hs-st[data-s="1"] .n, .hs[data-st="3"] .hs-st[data-s="2"] .n { border-color: var(--pale-line); color: var(--deep); }
.hs[data-st="2"] .hs-st[data-s="1"], .hs[data-st="3"] .hs-st[data-s="1"], .hs[data-st="3"] .hs-st[data-s="2"] { border-top-color: var(--pale-line); }

.hs-stage { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 760px) { .hs-stage { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; margin-top: 22px; } }
.hs-page, .hs-out { position: relative; height: 272px; }
@media (max-width: 759px) { .hs-page { height: 266px; } .hs-out { height: 300px; } }
@media (max-width: 359px) { .hs-out { height: 340px; } }
.hs-page { border: 1px solid var(--line-2); border-radius: 4px; background: #fff; overflow: hidden; }
.hs-url { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--line); background: #fbf8f1; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; }
.hs-lock { flex: none; width: 8px; height: 8px; border: 1px solid var(--line-2); border-radius: 2px; }
.hs-body { padding: 10px 16px 0; }
.hs-meta { display: flex; align-items: center; gap: 8px; height: 22px; font-size: 12px; color: var(--dim); }
.hs-noise { padding: 1px 5px; margin-left: -5px; border: 1px dashed transparent; border-radius: 3px; transition: border-color .45s ease, color .45s ease; white-space: nowrap; }
.hs-tag { font-size: 11.5px; color: var(--deep); opacity: 0; transition: opacity .45s ease; white-space: nowrap; }
.hs[data-st="2"] .hs-noise, .hs[data-st="3"] .hs-noise { border-color: var(--pale-line); color: #8d939a; }
.hs[data-st="2"] .hs-tag { opacity: 1; }
.hs-h { font-size: 18px; letter-spacing: -0.01em; color: var(--text); margin: 4px 0 8px; }
.hs-ln { display: block; height: 7px; margin: 0 0 8px; background: var(--sand); border-radius: 2px; }
.hs-txt { position: relative; z-index: 0; margin: 12px -8px 14px; padding: 0 8px; font-size: 14.5px; line-height: 1.55; color: var(--text); min-height: 4.65em; }
.hs-hl { position: absolute; inset: -5px 0; background: var(--pale); box-shadow: inset 2px 0 0 var(--blue); opacity: 0; transition: opacity .5s ease; z-index: -1; }
.hs[data-st="2"] .hs-hl, .hs[data-st="3"] .hs-hl { opacity: 1; }
.hs-old { background: linear-gradient(currentColor, currentColor) 0 58% / 0 1px no-repeat; transition: background-size .5s ease .1s, color .5s ease; }
.hs[data-st="2"] .hs-old, .hs[data-st="3"] .hs-old { background-size: 100% 1px; color: #8d939a; }
.hs-new { display: inline-block; vertical-align: bottom; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .7s cubic-bezier(.2, .7, .2, 1) .35s; }
.hs-new > span { display: inline-block; margin-left: .28em; color: var(--deep); background: rgba(0, 112, 254, .12); padding: 0 2px; }
.hs[data-st="2"] .hs-new, .hs[data-st="3"] .hs-new { max-width: 6em; }
.hs-scan { position: absolute; left: 0; right: 0; top: 30px; height: 46px; background: linear-gradient(to bottom, rgba(0, 112, 254, 0), rgba(0, 112, 254, .09)); border-bottom: 1px solid rgba(0, 112, 254, .55); opacity: 0; transform: translateY(-46px); pointer-events: none; }
.hs[data-st="1"] .hs-scan { animation: hs-scan 1.8s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes hs-scan { 0% { transform: translateY(-46px); opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateY(200px); opacity: 0; } }
.hs-status { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-top: 1px solid var(--line); background: #fbf8f1; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.hs-status i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: background-color .45s ease; }
.hs[data-st="1"] .hs-status i { background: var(--pale-line); }
.hs[data-st="2"] .hs-status i, .hs[data-st="3"] .hs-status i { background: var(--blue); }
.hs-say { transition: opacity .25s ease; overflow: hidden; text-overflow: ellipsis; }
.hs-say.out { opacity: 0; }

.hs-slot { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 14px; border: 1px dashed var(--line-2); border-radius: 4px; font-size: 13px; color: var(--dim); }
.hs-sk { display: grid; gap: 8px; width: 62%; }
.hs-sk i { display: block; height: 7px; background: var(--sand); border-radius: 2px; }
.hs-sk i:nth-child(2) { width: 80%; } .hs-sk i:nth-child(3) { width: 92%; } .hs-sk i:nth-child(4) { width: 46%; }
.hs-rec { position: absolute; inset: 0; display: grid; align-content: start; gap: 9px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 4px; background: #fff; box-shadow: inset 3px 0 0 var(--blue); opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.hs[data-st="3"] .hs-rec { opacity: 1; transform: none; }
.hs-rec-top { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--muted); }
.hs-clock { font-variant-numeric: tabular-nums; color: var(--text); }
.hs-rec-pg { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-ba { display: grid; gap: 6px; }
.hs-ba p { font-size: 13.5px; line-height: 1.5; color: var(--text); opacity: 0; transform: translateY(4px); transition: opacity .45s ease, transform .45s ease; }
.hs-ba p > span { display: inline-block; min-width: 3.6em; margin-right: 6px; font-size: 12px; color: var(--dim); }
.hs-ba s { color: #8d939a; }
.hs-ba ins { text-decoration: none; color: var(--deep); background: rgba(0, 112, 254, .12); padding: 0 2px; }
.hs[data-st="3"] .hs-ba p { opacity: 1; transform: none; }
.hs[data-st="3"] .hs-ba p.b { transition-delay: .25s; }
.hs[data-st="3"] .hs-ba p.a { transition-delay: .45s; }
.hs-lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.hs-lbl i { flex: none; width: 9px; height: 9px; background: var(--c-product, #00b3fe); }
.hs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-chips span { font-size: 12px; color: var(--muted); padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--card); }
@media (prefers-reduced-motion: reduce) { .hs *, .hs *::before { transition: none !important; animation: none !important; } }

/* the five drawings (how.js arts, prefix ar-): logo blues for what is active, greys only for what is
   inactive; hover names what is under the pointer (.ar-on) */
.hw-art { margin: 0 0 16px; }
/* the drawing's box is its final size from first paint (340 x 150 design, 1 unit = 1 px, scaled down
   below 340 px), so the tiles never grow when how.js draws into it (load CLS, 16 Oct). width: 100% keeps
   the box full width: without it the aspect ratio carries max-height over to the width (340 px cap) */
@media (scripting: enabled) { .hw-art { width: 100%; aspect-ratio: 340 / 150; max-height: 150px; } }
.no-js .hw-art { display: none; }
.ar { display: block; width: 100%; height: auto; overflow: visible; }
.ar path, .ar rect, .ar circle { vector-effect: non-scaling-stroke; }
.ar-t { font-family: var(--sans); font-size: 12.5px; fill: var(--muted); }
.ar-s { font-size: 11.5px; }
.ar-xs { font-size: 10.5px; fill: var(--text); }
.ar-k { fill: var(--deep); }
.ar-cap { font-size: 11.5px; fill: var(--deep); }
.ar-wire { fill: none; stroke: #c9dcf5; stroke-width: 1; }
.ar-base { fill: none; stroke: var(--pale-line); stroke-width: 1; }
.ar-tick { fill: none; stroke: #c9dcf5; stroke-width: 1; }
.ar-box { fill: #fff; stroke: var(--line-2); stroke-width: 1; transition: stroke .3s ease; }
.ar-box.on, .ar-box.ar-on { stroke: var(--blue); stroke-width: 1.5; }
.ar-chip rect { fill: #fff; stroke: var(--line-2); stroke-width: 1; transition: fill .3s ease, stroke .3s ease; }
.ar-chip text { transition: fill .3s ease; }
.ar-chip.on rect { fill: var(--pale); stroke: var(--blue); }
.ar-chip.on text { fill: var(--deep); }
.ar-chip.done rect { stroke: var(--pale-line); }
.ar-chip.ar-on rect { stroke: var(--blue); stroke-width: 1.5; }
.ar-pg { fill: #fff; stroke: var(--line-2); stroke-width: 1; transition: fill .3s ease, stroke .3s ease; }
.ar-pg.new { fill: #d6e8ff; stroke: var(--pale-line); }
.ar-pg.ck { fill: var(--pale); stroke: var(--pale-line); }
.ar-pg.hot { fill: var(--blue); stroke: var(--blue); }
.ar-pg.chg { fill: var(--deep); stroke: var(--deep); }
.ar .ar-on .ar-pg, .ar-pg.ar-on { stroke: var(--blue); stroke-width: 2; }
.ar-mk { fill: none; stroke: #b9c9de; stroke-width: 1; }
.ar-mk2 { fill: none; stroke: #b9c9de; stroke-width: 1; }
.ar-ring { fill: none; stroke: var(--deep); stroke-width: 1.25; transition: opacity .3s ease; }
.ar-gate { fill: var(--pale); stroke: var(--blue); stroke-width: 1.25; }
.ar-gate.ar-on { fill: #d6e8ff; }
.ar-it.r { fill: var(--blue); }
.ar-it.c { fill: #fff; stroke: #b9b1a1; stroke-width: 1; stroke-dasharray: 2 2; }
.ar-it.f { fill: #cdc3af; }
.ar-cardr { fill: #fff; stroke: var(--line-2); stroke-width: 1; }
.ar-tray { fill: #f6f2ea; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; }
.ar-tray.ar-on, g.ar-on .ar-cardr { stroke: var(--blue); }
.ar-band { fill: var(--pale); }
.ar-mark { fill: var(--blue); }
.ar-dot { fill: var(--deep); }
.ar-ring2 { fill: none; stroke: var(--blue); stroke-width: 1.25; }
.ar-ann { fill: var(--card); stroke: #bfb49c; stroke-width: 1; stroke-dasharray: 2 2; transition: fill .3s ease; }
.ar-ann.done { fill: #e7e0d0; stroke-dasharray: none; }
.ar-head { fill: none; stroke: var(--deep); stroke-width: 1; stroke-dasharray: 2 3; }
.ar-link { fill: none; stroke: var(--blue); stroke-width: 1.25; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
.ar-cl { fill: none; stroke: var(--pale-line); stroke-width: 1; }
.ar-bar { fill: #e7e0d0; }
.ar-del { fill: var(--pale-line); transition: fill .4s ease; }
.ar-del.gone { fill: #dfe7f2; }
.ar-strike { fill: none; stroke: var(--deep); stroke-width: 1.25; }
.ar-ins { fill: var(--blue); }
.pu-tile .ar { cursor: crosshair; }
.pu-tile .ar[data-art="feed"] { cursor: default; }
.ar-t.ar-root { font-size: 11.5px; }
@media (max-width: 559px) { .ar-t { font-size: 14px; } .ar-s { font-size: 13px; } .ar-xs { font-size: 11px; } .ar-cap { font-size: 13px; } .ar-t.ar-root { font-size: 11.5px; } }
@media (max-width: 359px) { .hs-rail { gap: 0 6px; } .hs-st { gap: 2px 6px; } .hs-st .k { font-size: 14px; } .hs-st .n { width: 20px; height: 20px; font-size: 11px; } }

/* ================================================================ v9 (16 Oct): one design for the whole section.
   The upper part (statement, What we watch / What you get, the story) uses exactly the type, spacing
   and card style of the Five steps part: the same headline size, the same lede, cards like the step
   cards (1 px line, 6 px corners, the same padding and title size) and a panel like the tour panel. */
.hw .sec-head h2.statement, .hw-h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.02em; max-width: 36ch; }
.hw .sec-head .hw-lede { margin-top: 12px; }
.hw .tiles.hw-tiles { margin-top: 24px; gap: 8px; }
@media (min-width: 760px) { .hw .tiles.hw-tiles { gap: 12px; } }
.hw-tiles .tile { border: 1px solid var(--line); border-radius: 6px; padding: 14px; gap: 8px; }
@media (min-width: 760px) { .hw-tiles .tile { padding: 16px; } }
@media (min-width: 1100px) { .hw-tiles .tile { padding: 14px 16px; } }
.hw-tiles .tile h3 { font-size: 15px; line-height: 1.3; letter-spacing: -0.005em; }
.hw-tiles .tile p { font-size: 14px; line-height: 1.55; max-width: 60ch; }
@media (min-width: 1100px) { .hw-tiles .tile h3 { font-size: 16.5px; } .hw-tiles .tile p { font-size: 15.5px; } }
.hw-tiles .hw-art { margin-bottom: 8px; }
.hs { margin-top: 12px; padding: 24px 16px 16px; }
@media (min-width: 700px) { .hs { padding: 24px; } }
@media (min-width: 1100px) { .hs { padding: 28px; } }
.hs-st .k { font-size: 15px; line-height: 1.3; letter-spacing: -0.005em; }
.hs-st .d { font-size: 14px; line-height: 1.55; }
@media (min-width: 1100px) { .hs-st .k { font-size: 16.5px; } .hs-st .d { font-size: 15.5px; } }
@media (max-width: 759px) { .hs-rail { padding-bottom: 58px; } .hs-st .d { top: 46px; } }
.hs-st { align-items: start; align-content: start; }
.hs-st .k { line-height: 24px; }
@media (max-width: 759px) { .hs-st { align-items: center; } }

/* ================================================================ v10 (16 Oct): the upper part's text at exactly the
   Five steps sizes. Drawings: labels as the tour figures' labels (14 / 12 px), feed rows, tray and captions as
   the tour's small text (13 / 12 px), never scaled with the drawing (--k from how.js oneToOne). Story: stage
   titles as the tour tabs (14 / 13 px), the example page and record as the tour figures' text. */
.ar-watch, .ar-get { --fs-lab: 12px; --fs-sm: 12px; }
@media (min-width: 1100px) { .ar-watch, .ar-get { --fs-lab: 14px; --fs-sm: 13px; } }
.ar-watch .ar-t, .ar-get .ar-t { font-size: calc(var(--fs-lab) * var(--k, 1)); }
.ar-watch .ar-xs, .ar-get .ar-xs, .ar-watch .ar-cap, .ar-get .ar-cap { font-size: calc(var(--fs-sm) * var(--k, 1)); }
.hs { --fs-t: 13px; --fs-x: 13px; --fs-sm: 12px; }
@media (min-width: 1100px) { .hs { --fs-t: 14px; --fs-x: 14.5px; --fs-sm: 13px; } }
.hs-st .k { font-size: var(--fs-t); }
.hs-h { font-size: var(--fs-t); margin: 4px 0 8px; }
.hs-txt { font-size: var(--fs-x); }
.hs-ba p { font-size: var(--fs-t); }
.hs-ba p > span, .hs-rec-top, .hs-lbl, .hs-chips span, .hs-url, .hs-meta, .hs-tag, .hs-status, .hs-rec-pg, .hs-slot { font-size: var(--fs-sm); }

/* ================================================================ perf (16 Oct): overlay layers and containment.
   A figure's moving marks live in .hw-ov, a second SVG laid exactly over the drawing on its own compositor layer,
   so a frame repaints only them. The ghost of a cross-fade is its own layer too, and the panel contains its
   layout and paint, so a step change never invalidates the rest of the page. */
.hw-ov { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; will-change: transform; }
.hw-cbox svg.hw-sweep.hw-ov { background: none; }
.hw-ghost { will-change: opacity; contain: layout paint style; }
.hw-tabbed .hw-app { contain: layout paint; }