.tp4-rotation-lab {
  margin: 1.25rem 0 2rem;
  border: 1px solid var(--md-default-fg-color--lightest, #ddd);
  border-radius: .65rem;
  padding: 1rem;
}
.tp4-rotation-layout { display: flex; flex-direction: column; gap: .8rem; }
.tp4-rotation-controls, .tp4-rotation-stepper {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
}
.tp4-rotation-lab button {
  border: 1px solid var(--md-default-fg-color--lighter, #aaa);
  border-radius: .35rem; padding: .45rem .7rem;
  background: var(--md-code-bg-color, #f5f5f5); color: var(--md-default-fg-color, #222);
  cursor: pointer; font: inherit;
}
.tp4-rotation-lab button:hover:not(:disabled) { border-color: var(--md-accent-fg-color, #526cfe); }
.tp4-rotation-lab button.is-active { background: var(--md-primary-fg-color, #4051b5); color: var(--md-primary-bg-color, #fff); border-color: var(--md-primary-fg-color, #4051b5); }
.tp4-rotation-lab button:disabled { opacity: .45; cursor: not-allowed; }
.tp4-rotation-stepper [data-role="step-count"] { padding: .3rem .45rem; font-size: .9rem; }
.tp4-rotation-layout h3 { margin: .25rem 0 0; }
.tp4-rotation-layout [data-role="step-text"] { margin: 0; min-height: 3.2em; }
.tp4-rotation-tree-wrap { overflow-x: auto; background: var(--md-code-bg-color, #fafafa); border-radius: .45rem; padding: .4rem; }
.tp4-rotation-tree-wrap svg { display: block; min-width: 100%; }
.tp4-tree-edge { stroke: var(--md-default-fg-color--light, #888); stroke-width: 2.2; }
.tp4-tree-node circle { fill: var(--md-default-bg-color, #fff); stroke: var(--md-default-fg-color, #333); stroke-width: 2; transition: fill .18s ease, stroke .18s ease; }
.tp4-tree-node text { fill: var(--md-default-fg-color, #222); font-size: 14px; font-weight: 600; pointer-events: none; }
.tp4-tree-node.is-root circle { stroke: var(--md-primary-fg-color, #4051b5); stroke-width: 3; }
.tp4-tree-node.is-focus circle { fill: #ffe7a8; stroke: #a66b00; stroke-width: 3; }
.tp4-rotation-code { border-left: .25rem solid var(--md-primary-fg-color, #4051b5); padding: .5rem .8rem; background: var(--md-code-bg-color, #f5f5f5); overflow-wrap: anywhere; }
.tp4-rotation-code-label { font-size: .78rem; opacity: .75; margin-bottom: .25rem; }
.tp4-rotation-code code { font-size: 1rem; white-space: pre-wrap; }
.tp4-rotation-reminder { margin: 0; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .tp4-tree-node circle { transition: none; } }