.article .demo{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin:28px 0;padding:18px 18px 14px}.article .demo canvas{width:100%;display:block}.article .demo .legend{color:var(--ink-2);flex-wrap:wrap;gap:6px 16px;margin:14px 0 0;padding:0;font-size:12.5px;list-style:none;display:flex}.article .demo .legend li{align-items:center;gap:6px;margin:0;display:inline-flex}.article .demo .legend i{background:var(--k);border-radius:3px;width:12px;height:12px}.article .demo .legend i.hatch{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--k) 60%,transparent) 0 1.5px,color-mix(in srgb,var(--k) 12%,transparent) 1.5px 5px)}.article .demo figcaption{color:var(--ink-3);margin-top:8px;font-size:12.5px}@media (width<=560px){.article .demo{margin-inline:-4px;padding:14px 12px 12px}}.article .demo-controls{flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;display:flex}.article .demo-controls button{font:inherit;border:1px solid var(--line);background:var(--surface);min-width:34px;height:30px;color:var(--ink-2);cursor:pointer;border-radius:6px;padding:0 10px;font-size:12px;line-height:1}.article .demo-controls button:hover{border-color:var(--accent);color:var(--accent)}.article .demo-controls .steps{align-items:center;gap:4px;margin-left:6px;display:flex}.article .demo-controls .steps button{background:var(--line);border:none;border-radius:5px;width:9px;min-width:0;height:9px;padding:0;transition:width .2s;position:relative;overflow:hidden}.article .demo-controls .steps button.done{background:color-mix(in srgb,var(--accent) 45%,var(--line))}.article .demo-controls .steps button.on{width:26px}.article .demo-controls .steps button.on:after{content:"";width:var(--prog,0%);background:var(--accent);position:absolute;inset:0 auto 0 0}.article .demo-controls .count{color:var(--ink-3);margin-left:auto;font-family:IBM Plex Mono,monospace;font-size:12px}.article .demo-controls .sr-note{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.article .pr-timeline ol{margin:0;padding:0;list-style:none;position:relative}.article .pr-timeline ol:before{content:"";background:var(--line);width:2px;position:absolute;top:8px;bottom:8px;left:67px}.article .pr-timeline li{grid-template-columns:56px 24px minmax(0,1fr);align-items:start;margin:0 0 16px;display:grid}.article .pr-timeline li:last-child{margin-bottom:0}.article .pr-timeline .date{color:var(--ink-3);text-align:right;padding-right:4px;font-size:12.5px;line-height:22px}.article .pr-timeline .dot{--k:var(--accent);background:var(--surface);border:2.5px solid var(--k);z-index:1;border-radius:50%;width:12px;height:12px;margin:5px 0 0 6px;position:relative}.article .pr-timeline .issue .dot,.article .pr-timeline .issue .tag{--k:var(--c-career)}.article .pr-timeline .review .dot,.article .pr-timeline .review .tag{--k:var(--c-algorithm)}.article .pr-timeline .merge .dot,.article .pr-timeline .merge .tag{--k:var(--c-infra)}.article .pr-timeline .merge .dot{background:var(--k)}.article .pr-timeline .head{flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14.5px;line-height:22px;display:flex}.article .pr-timeline .head a{color:var(--ink);border-bottom:1px solid var(--line);font-weight:600}.article .pr-timeline .head a:hover{border-color:var(--accent)}.article .pr-timeline .tag{--k:var(--accent);color:var(--k);background:color-mix(in srgb,var(--k) 12%,transparent);border-radius:4px;padding:0 6px;font-size:11px;font-weight:700;line-height:18px}.article .pr-timeline .body p{color:var(--ink-2);margin:2px 0 0;font-size:13.5px;line-height:1.6}.article .pr-timeline .size{color:var(--ink-3);align-items:center;gap:8px;margin-top:6px;font-size:12px;display:flex}.article .pr-timeline .size .bar{background:var(--c-infra);border-radius:3px;flex:none;height:6px}.article .pr-timeline .size b{color:var(--c-infra);font-weight:700}.article .pr-timeline .muted .head a,.article .pr-timeline .muted .body p{color:var(--ink-3)}.article .pr-timeline .muted .size .bar{background:color-mix(in srgb,var(--ink-3) 50%,transparent)}.article .pr-timeline .muted .size b{color:var(--ink-3)}.article .gh-shot{margin:24px 0}.article .gh-shot>a{max-width:568px;display:block}.article .gh-shot img{border-radius:8px;width:100%;height:auto;display:block}.article .gh-shot .dark,:root[data-theme=dark] .article .gh-shot .light{display:none}:root[data-theme=dark] .article .gh-shot .dark{display:block}.article .gh-shot figcaption{color:var(--ink-3);margin-top:8px;font-size:12.5px}.article .gh-shot figcaption a{color:var(--accent)}