.article-page .dom-button-row{display:flex;flex-wrap:wrap;gap:var(--cf-space-150)}.article-page .dom-playground .pane-body{display:grid;grid-gap:var(--cf-space-250);gap:var(--cf-space-250)}.article-page .positions-diagram{display:grid;grid-gap:var(--cf-space-100);gap:var(--cf-space-100);justify-items:center;border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-200);padding:var(--cf-space-250);background:var(--cf-color-surface-raised);color:var(--cf-color-text-secondary);font-family:var(--cf-font-mono);font-size:var(--cf-font-size-200)}.article-page .positions-diagram div{display:inline-grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--cf-space-150)}.article-page .positions-diagram strong{border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-200);padding:var(--cf-space-100) var(--cf-space-200);background:var(--cf-color-surface);color:var(--cf-color-text)}.article-page .dom-live-list ul,.article-page .fragment-output ul,.article-page .move-lists ul{display:grid;grid-gap:var(--cf-space-150);gap:var(--cf-space-150);list-style:none;margin:0;padding-left:0}.article-page .dom-live-list li,.article-page .fragment-output li,.article-page .move-lists li{border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-200);padding:var(--cf-space-150) var(--cf-space-200);background:var(--cf-color-surface);color:var(--cf-color-text)}.article-page .dom-live-list .target{border-color:var(--cf-color-border-control);font-weight:var(--cf-font-weight-strong)}.article-page .dom-live-list .new-node{background:var(--cf-color-surface-raised)}.article-page .dom-log{display:grid;max-height:calc(var(--cf-space-900)*2);overflow:auto;grid-gap:var(--cf-space-100);gap:var(--cf-space-100);margin:0;padding-left:var(--cf-space-450);color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-200)}.article-page .move-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:var(--cf-space-300);gap:var(--cf-space-300)}.article-page .adjacent-panel,.article-page .move-lists section,.article-page .template-card{display:grid;grid-gap:var(--cf-space-200);gap:var(--cf-space-200);border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-200);padding:var(--cf-space-250);background:var(--cf-color-surface-raised)}.article-page .move-lists h4{margin:0;color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-200)}.article-page .move-lists li{cursor:pointer}.article-page .fragment-output{display:grid;max-height:calc(var(--cf-space-900)*3);overflow:auto;grid-gap:var(--cf-space-250);gap:var(--cf-space-250)}.article-page .adjacent-panel label{color:var(--cf-color-text-secondary);font-weight:var(--cf-font-weight-strong)}.article-page .adjacent-panel input{width:100%;border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-200);padding:var(--cf-space-150) var(--cf-space-200);background:var(--cf-color-surface);color:var(--cf-color-text);font:inherit}.article-page .final-definition{border-left:var(--cf-space-050) solid var(--cf-color-border-control);padding-left:var(--cf-space-250)}@media(max-width:560px){.article-page .move-lists,.article-page .positions-diagram div{grid-template-columns:1fr}}