.article-page .loop-visualizer .loop-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cf-space-200) var(--cf-space-300)}.article-page .loop-visualizer .loop-select{display:inline-flex;align-items:center;gap:var(--cf-space-150);color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-275)}.article-page .loop-visualizer .loop-select select{min-height:34px;max-inline-size:16rem;padding:var(--cf-space-100) var(--cf-space-200);border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-100);background:var(--cf-color-surface-input);color:var(--cf-color-text);font:inherit}.article-page .loop-visualizer .loop-buttons,.article-page .loop-visualizer .loop-edit-buttons,.article-page .loop-visualizer .loop-speed{display:inline-flex;flex-wrap:wrap;gap:var(--cf-space-150)}.article-page .loop-visualizer .loop-buttons button,.article-page .loop-visualizer .loop-panel-heading button,.article-page .loop-visualizer .loop-speed button{min-height:34px;padding:var(--cf-space-100) var(--cf-space-300);border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-100);background:var(--cf-color-surface-input);color:var(--cf-color-text);font-size:var(--cf-font-size-275)}.article-page .loop-visualizer .loop-buttons button:hover:not(:disabled),.article-page .loop-visualizer .loop-panel-heading button:hover:not(:disabled),.article-page .loop-visualizer .loop-speed button:hover:not(:disabled){background:var(--cf-color-surface-hover)}.article-page .loop-visualizer .loop-buttons button:disabled,.article-page .loop-visualizer .loop-panel-heading button:disabled,.article-page .loop-visualizer .loop-speed button:disabled{color:var(--cf-color-text-secondary);cursor:not-allowed;opacity:.6}.article-page .loop-visualizer .loop-buttons button[aria-pressed=true]:not(.loop-play),.article-page .loop-visualizer .loop-panel-heading button[aria-pressed=true]:not(.loop-play),.article-page .loop-visualizer .loop-speed button[aria-pressed=true]:not(.loop-play){border-color:var(--cf-color-primary-border);background:var(--cf-color-primary-subtle)}.article-page .loop-visualizer .loop-buttons .loop-play,.article-page .loop-visualizer .loop-panel-heading .loop-run{min-width:6rem;border-color:var(--cf-color-code-button);background:var(--cf-color-code-button);color:var(--cf-color-code-on-button)}.article-page .loop-visualizer .loop-buttons .loop-play:hover:not(:disabled),.article-page .loop-visualizer .loop-panel-heading .loop-run:hover:not(:disabled){background:var(--cf-color-code-button-hover)}.article-page .loop-visualizer .loop-board{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-gap:var(--cf-space-300);gap:var(--cf-space-300);padding:var(--cf-space-300);background:var(--cf-color-surface-sunken)}.article-page .loop-visualizer .loop-left,.article-page .loop-visualizer .loop-right{display:grid;align-content:start;grid-gap:var(--cf-space-300);gap:var(--cf-space-300);min-width:0}.article-page .loop-visualizer .loop-panel{display:grid;align-content:start;grid-gap:var(--cf-space-200);gap:var(--cf-space-200);min-width:0;margin:0;padding:var(--cf-space-250);border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-300);background:var(--cf-color-surface)}.article-page .loop-visualizer .loop-panel-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--cf-space-100) var(--cf-space-200)}.article-page .loop-visualizer .loop-panel-heading strong{color:var(--cf-color-text);font-size:var(--cf-font-size-300)}.article-page .loop-visualizer .loop-panel-heading span{color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-250)}.article-page .loop-visualizer .loop-panel-heading .is-pending{color:var(--cf-color-warning);font-weight:var(--cf-font-weight-semibold)}.article-page .loop-visualizer .loop-empty{margin:0;color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-275);font-style:italic}.article-page .loop-visualizer .loop-code{background:var(--cf-color-code-bg)}.article-page .loop-visualizer .loop-lines{max-block-size:22rem;margin:0;padding:0;overflow:auto;list-style:none;color:var(--cf-color-code-text);font-family:var(--cf-font-mono);font-size:var(--cf-font-size-275);font-feature-settings:none;font-variant-ligatures:none;line-height:var(--cf-line-height-160)}.article-page .loop-visualizer .loop-lines li{display:grid;grid-template-columns:2.2em minmax(0,1fr);border-radius:var(--cf-radius-100);transition:background var(--cf-duration-normal) var(--cf-ease-standard)}.article-page .loop-visualizer .loop-lines li.is-active{background:var(--cf-color-code-active-line);box-shadow:inset 3px 0 0 var(--cf-color-primary-solid)}.article-page .loop-visualizer .loop-lines code{padding:0 var(--cf-space-150) 0 0;border:0;border-radius:0;box-shadow:none;background:none;color:inherit;font-size:inherit;white-space:pre-wrap;overflow-wrap:anywhere}.article-page .loop-visualizer .loop-lines .tok-keyword{color:var(--cf-color-code-keyword)}.article-page .loop-visualizer .loop-lines .tok-regexp,.article-page .loop-visualizer .loop-lines .tok-string{color:var(--cf-color-code-string)}.article-page .loop-visualizer .loop-lines .tok-number{color:var(--cf-color-code-number)}.article-page .loop-visualizer .loop-lines .tok-constant{color:var(--cf-color-code-constant)}.article-page .loop-visualizer .loop-lines .tok-comment{color:var(--cf-color-code-comment);font-style:italic}.article-page .loop-visualizer .loop-lines .tok-function{color:var(--cf-color-code-function)}.article-page .loop-visualizer .loop-lines .tok-type{color:var(--cf-color-code-type)}.article-page .loop-visualizer .loop-lines .tok-definition{color:var(--cf-color-code-definition)}.article-page .loop-visualizer .loop-lines .tok-variable{color:var(--cf-color-code-variable)}.article-page .loop-visualizer .loop-lines .tok-property{color:var(--cf-color-code-property)}.article-page .loop-visualizer .loop-line-number{-webkit-padding-end:var(--cf-space-150);padding-inline-end:var(--cf-space-150);color:var(--cf-color-code-line-number);text-align:right;-webkit-user-select:none;-moz-user-select:none;user-select:none}.article-page .loop-visualizer .loop-editor{min-block-size:14rem;resize:vertical;padding:var(--cf-space-200);border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-200);background:var(--cf-color-surface-input);color:var(--cf-color-text);font-family:var(--cf-font-mono);font-size:var(--cf-font-size-275);font-feature-settings:none;font-variant-ligatures:none;line-height:var(--cf-line-height-160)}.article-page .loop-visualizer .loop-browser ul,.article-page .loop-visualizer .loop-console ol,.article-page .loop-visualizer .loop-queue ol,.article-page .loop-visualizer .loop-stack ol{display:flex;gap:var(--cf-space-150);margin:0;padding:0;list-style:none}.article-page .loop-visualizer .loop-stack ol{flex-direction:column-reverse;min-block-size:7rem;justify-content:flex-start}.article-page .loop-visualizer .loop-browser ul{flex-direction:column}.article-page .loop-visualizer .loop-queue ol{flex-wrap:wrap}.article-page .loop-visualizer .loop-card{display:grid;grid-gap:var(--cf-space-050);gap:var(--cf-space-050);min-width:0;padding:var(--cf-space-150) var(--cf-space-200);border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-200);background:var(--cf-color-surface-raised);animation:loop-card-in var(--cf-duration-slow) var(--cf-ease-emphasized)}.article-page .loop-visualizer .loop-card code{padding:0;border:0;border-radius:0;box-shadow:none;background:none;color:var(--cf-color-text);font-family:var(--cf-font-mono);font-size:var(--cf-font-size-275);overflow-wrap:anywhere}.article-page .loop-visualizer .loop-card-kind{color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-225);font-weight:var(--cf-font-weight-bold);letter-spacing:var(--cf-letter-spacing-wide);text-transform:uppercase}.article-page .loop-visualizer .loop-card-detail{color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-250)}.article-page .loop-visualizer .loop-card.is-frame{border-color:var(--cf-color-border-strong);background:var(--cf-color-surface-raised)}.article-page .loop-visualizer .loop-card.is-frame.from-script{border-style:dashed}.article-page .loop-visualizer .loop-card.is-frame.from-microtask,.article-page .loop-visualizer .loop-card.is-microtask{border-color:var(--cf-color-secondary-border);background:var(--cf-color-secondary-subtle)}.article-page .loop-visualizer .loop-card.is-frame.from-frame,.article-page .loop-visualizer .loop-card.is-frame.from-task,.article-page .loop-visualizer .loop-card.is-task{border-color:var(--cf-color-warning-border);background:var(--cf-color-warning-subtle)}.article-page .loop-visualizer .loop-card.is-fetch,.article-page .loop-visualizer .loop-card.is-listener{border-color:var(--cf-color-tertiary-border);background:var(--cf-color-tertiary-subtle)}.article-page .loop-visualizer .loop-timer{display:block;block-size:4px;overflow:hidden;border-radius:var(--cf-radius-full);background:var(--cf-color-border)}.article-page .loop-visualizer .loop-timer span{display:block;block-size:100%;background:var(--cf-color-warning);transition:inline-size var(--cf-duration-slower) var(--cf-ease-standard)}.article-page .loop-visualizer .loop-queues{grid-template-columns:auto minmax(0,1fr);align-items:start}.article-page .loop-visualizer .loop-queue{display:grid;grid-gap:var(--cf-space-150);gap:var(--cf-space-150);grid-column:2;min-width:0}.article-page .loop-visualizer .loop-wheel{display:grid;grid-row:span 3;justify-items:center;grid-gap:var(--cf-space-100);gap:var(--cf-space-100);padding-top:var(--cf-space-200);color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-225);text-align:center}.article-page .loop-visualizer .loop-wheel svg{inline-size:2.75rem;block-size:2.75rem;fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}.article-page .loop-visualizer .loop-wheel.is-turning{color:var(--cf-color-success)}.article-page .loop-visualizer .loop-wheel.is-turning svg{animation:loop-turn var(--cf-duration-slower) var(--cf-ease-emphasized)}.article-page .loop-visualizer .loop-console ol{flex-direction:column;gap:var(--cf-space-100);font-family:var(--cf-font-mono);font-size:var(--cf-font-size-275)}.article-page .loop-visualizer .loop-console ol li{-webkit-padding-after:var(--cf-space-100);padding-block-end:var(--cf-space-100);-webkit-border-after:1px solid var(--cf-color-border);border-block-end:1px solid var(--cf-color-border);overflow-wrap:anywhere;animation:loop-card-in var(--cf-duration-slow) var(--cf-ease-emphasized)}.article-page .loop-visualizer .loop-console ol .is-error{color:var(--cf-color-danger)}.article-page .loop-visualizer .loop-console ol .is-warn{color:var(--cf-color-warning)}.article-page .loop-visualizer .loop-page-body{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cf-space-200);padding:var(--cf-space-300);border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-200);background:var(--cf-color-surface-raised)}.article-page .loop-visualizer .loop-page-element{min-height:40px;padding:var(--cf-space-150) var(--cf-space-400);border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-200);background:var(--cf-color-surface-input);color:var(--cf-color-text);font-size:var(--cf-font-size-300)}.article-page .loop-visualizer .loop-page-element.is-button{border-color:var(--cf-color-primary-border);background:var(--cf-color-primary-solid);color:var(--cf-color-on-primary);font-weight:var(--cf-font-weight-semibold)}.article-page .loop-visualizer .loop-page-element.is-div{min-inline-size:4rem;min-block-size:4rem}@media(max-width:768px){.article-page .loop-visualizer .loop-board{grid-template-columns:minmax(0,1fr)}.article-page .loop-visualizer .loop-right{grid-row:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.article-page .loop-visualizer .loop-queues{grid-column:1/-1}.article-page .loop-visualizer .loop-lines{max-block-size:14rem}}@media(max-width:560px){.article-page .loop-visualizer .loop-right{grid-template-columns:minmax(0,1fr)}.article-page .loop-visualizer .loop-buttons button,.article-page .loop-visualizer .loop-panel-heading button,.article-page .loop-visualizer .loop-speed button{min-height:42px}}@media(prefers-reduced-motion:reduce){.article-page .loop-visualizer .loop-card,.article-page .loop-visualizer .loop-console li,.article-page .loop-visualizer .loop-wheel.is-turning svg{animation:none}.article-page .loop-visualizer .loop-lines li,.article-page .loop-visualizer .loop-timer span{transition:none}}@keyframes loop-card-in{0%{opacity:0;transform:translateY(-6px) scale(.97)}}@keyframes loop-turn{0%{transform:rotate(-200deg)}}