.wk { --P: 26px; --G: 26px; --kg: 12px; --I: 52px; container: wkc / inline-size; position: relative; margin: 0; color: var(--bone); will-change: transform; }   
.wk-cap { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; margin-bottom: 24px; }
.wk .wk-rune { width: 22px; height: 22px; flex: none; }   
.wk-name { font: 700 18px/1.3 var(--f-body); }
.wk-tag { font: 400 14px/1.4 var(--f-body); color: var(--ash); }

.wk-path { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--G); max-width: 560px; }
.wk-c, .wk-k { position: relative; }
.wk-n { position: relative; z-index: 1; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 11px; row-gap: 3px; align-content: start;
  padding: 13px 15px 15px 13px; background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; }
.wk-ic { grid-row: 1; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--hair); border-radius: 7px; background: var(--ink); color: var(--bone); }
.wk-i { width: 16px; height: 16px; }
.wk-t { grid-column: 2; padding-top: 3px; font: 700 15px/1.35 var(--f-body); text-wrap: pretty; }
.wk-l { grid-column: 2; color: var(--ash); font-size: 14px; line-height: 1.45; text-wrap: pretty; }   
.wk-router { border-color: var(--bone); }
.wk-p { border-color: var(--red); }
.wk-p .wk-ic { background: var(--red); border-color: var(--red); }


.wk-pi, .wk-po { position: absolute; z-index: 2; width: 9px; height: 9px; border: 1.5px solid var(--bone); border-radius: 50%; background: var(--ink); }
.wk-pi { left: calc(var(--P) - 4.5px); top: -5px; }
.wk-po { left: calc(var(--P) - 4.5px); bottom: -5px; }


.wk-w { position: absolute; z-index: 0; display: none; overflow: visible; }
.wk-w path { fill: none; stroke: var(--edge); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linecap: round; }   
.wk-ws { display: block; }
.wk-ws.wk-in { left: calc(var(--P) - 1px); width: 2px; bottom: 100%; height: var(--G); }


.wk-fl { display: grid; grid-auto-rows: 1fr; gap: var(--kg); padding-left: var(--I); }
.wk-k > .wk-n { height: 100%; }

.wk-trunk { left: calc(var(--P) - 1px); width: 2px; top: calc(var(--G) * -1); height: calc(100% + 2 * var(--G)); }
.wk-fan:last-child > .wk-trunk { height: calc(100% + var(--G) - (100% - (var(--nk, 3) - 1) * var(--kg)) / var(--nk, 3) + var(--P)); }   
.wk-k > .wk-ws.wk-in { left: calc(var(--P) - var(--I)); width: calc(var(--I) - var(--P)); top: calc(var(--P) - 22px); bottom: auto; height: 22px; }
.wk-k .wk-pi { left: -5px; top: calc(var(--P) - 4.5px); }
.wk-k .wk-po { display: none; }


.wk-lt { position: absolute; z-index: 2; font: 400 14px/1 var(--f-body); color: var(--ash); white-space: nowrap; }
.wk-yes { left: calc(var(--P) + 12px); top: calc(var(--G) / -2); translate: 0 -50%; }
.wk-loop .wk-path { --G: 34px; padding-right: 30px; }
.wk-ws.wk-lw { left: 100%; width: 22px; top: var(--P); height: calc(100% - var(--P) + var(--G) / 2); }
.wk-ws.wk-lc { left: 100%; width: 22px; top: calc(var(--G) / -2); height: calc(var(--G) / 2 + var(--P)); }
.wk-la { position: absolute; z-index: 2; left: calc(100% + 1px); top: calc(var(--P) - 5px); width: 8px; height: 10px; background: var(--red); clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.wk-no { right: 8px; top: calc(var(--G) / -2); translate: 0 -50%; }
.wk-lu-a { display: none; }


.wk-x { margin: 0; padding-left: calc(var(--P) - 11px); font: 700 15px/1.35 var(--f-body); color: var(--bone); text-wrap: pretty; }
.wk-bar { display: block; width: 22px; height: 2px; margin-bottom: 10px; background: var(--bone); }


.wk-now .wk-n { border-color: var(--hair); }
.wk-now .wk-t, .wk-now .wk-ic { color: var(--ash); }   
.wk-now .wk-pi, .wk-now .wk-po { border-color: var(--edge); }


@container wkc (min-width: 1000px) {
  .wk .wk-path { --G: 44px; --GF: 88px; --kg: 16px; flex-direction: row; align-items: flex-start; max-width: none; padding-right: 0; }
  .wk-now .wk-path, .wk-loop .wk-path { align-items: stretch; }
  .wk-now .wk-n, .wk-loop .wk-n { height: 100%; }
  .wk .wk-c { flex: var(--w, 1) 1 0; min-width: 0; }
  .wk .wk-fl { padding-left: 0; }
  .wk .wk-fan { margin-inline: calc(var(--GF) - var(--G)); }
  .wk .wk-fan:last-child { margin-right: 0; }
  .wk .wk-pi { left: -5px; top: calc(var(--P) - 4.5px); }
  .wk .wk-po, .wk .wk-k .wk-po { display: block; left: auto; right: -5px; top: calc(var(--P) - 4.5px); bottom: auto; }
  .wk .wk-ws, .wk .wk-la { display: none; }
  .wk .wk-wr { display: block; }
  .wk .wk-wr.wk-in { right: 100%; width: var(--G); top: calc(var(--P) - 1px); height: 2px; }
  .wk .wk-k > .wk-wr { width: var(--GF); top: calc(var(--P) - var(--k) * (100% + var(--kg))); height: calc(var(--k) * (100% + var(--kg))); }   
  .wk .wk-k > .wk-wr.wk-out { right: auto; left: 100%; }
  .wk .wk-k:first-child > .wk-wr { top: calc(var(--P) - 1px); height: 2px; }
  .wk .wk-yes { left: calc(var(--G) / -2); top: calc(var(--P) - 8px); translate: -50% -100%; }
  
  .wk .wk-x { display: grid; grid-template-columns: 2px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: calc(var(--P) - 11px) 0 0; }
  .wk .wk-bar { width: 2px; height: 22px; margin: 0; }
  
  .wk-loop .wk-path { padding-bottom: 72px; }
  .wk-wr.wk-lu { left: calc(-50% - var(--G)); width: calc(100% + var(--G)); top: 100%; height: 40px; }
  .wk-lu-a { display: block; position: absolute; z-index: 2; left: calc(-50% - var(--G) - 5px); top: calc(100% + 1px); width: 10px; height: 8px; background: var(--red); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .wk-no { right: auto; left: calc(var(--G) / -2); top: calc(100% + 44px); translate: -50% 0; }
}
@container wkc (max-width: 420px) {   
  .wk-fl { padding-left: 40px; }
  .wk-k > .wk-ws.wk-in { left: calc(var(--P) - 40px); width: calc(40px - var(--P)); }
}

@media (forced-colors: active) {
  .wk-w path { stroke: CanvasText; }
  .wk-n { border-color: CanvasText; }
  .wk-pi, .wk-po { border-color: CanvasText; background: Canvas; }
  .wk-la, .wk-lu-a { background: CanvasText; forced-color-adjust: none; }
}


@keyframes wk-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }   
@keyframes wk-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }   
@keyframes wk-back { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }   
@keyframes wk-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-motion) .wk.wk-play .wk-n { animation: wk-in 420ms var(--ease) both; animation-delay: calc(var(--i, 0) * 200ms + var(--k, 0) * 70ms); }
  html:not(.no-motion) .wk.wk-play .wk-wr { animation: wk-draw 340ms ease-in-out both; animation-delay: calc(var(--i, 0) * 200ms - 150ms + var(--k, 0) * 70ms); }
  html:not(.no-motion) .wk.wk-play .wk-ws { animation: wk-down 340ms ease-in-out both; animation-delay: calc(var(--i, 0) * 200ms - 150ms + var(--k, 0) * 70ms); }
  html:not(.no-motion) .wk.wk-play .wk-lu { animation-name: wk-back; }
  html:not(.no-motion) .wk.wk-play :is(.wk-lu, .wk-lw, .wk-lc) { animation-delay: calc(var(--n, 4) * 200ms); }
  html:not(.no-motion) .wk.wk-play :is(.wk-pi, .wk-po, .wk-lt, .wk-la, .wk-lu-a, .wk-x) { animation: wk-in 300ms var(--ease) both; animation-delay: calc(var(--i, 0) * 200ms + 100ms); }
}