.experiment { margin: 1.8rem 0; padding: 1.3rem; border: 1px solid #cbdcd8; border-radius: 12px; background: #f7fbfa; font-family: var(--font-ui, system-ui, sans-serif); }
.experiment h3 { margin: .3rem 0 1rem; font-size: 1.15rem; }
.experiment-controls, .experiment-choices { display: flex; flex-wrap: wrap; gap: .45rem; }
.experiment-controls { gap: .75rem; margin-bottom: 1rem; }
.experiment-choices { flex-basis: 100%; }
.experiment button { padding: .55rem .75rem; border: 1px solid #b8ceca; border-radius: 7px; background: white; color: #24453f; font: inherit; font-size: .82rem; cursor: pointer; transition: background 160ms, color 160ms; }
.experiment button[aria-pressed=true] { background: #24453f; border-color: #24453f; color: white; }
.experiment button:disabled { opacity: .5; cursor: default; }
.experiment button:focus-visible { outline: 3px solid #328479; outline-offset: 3px; }
.experiment-network { display: flex; align-items: center; gap: .55rem; }
.experiment-node { flex: 1; min-width: 0; border: 1px solid #d7dfdd; background: white; border-radius: 8px; padding: .8rem; transition: background 220ms, border-color 220ms; }
.experiment-node span { display: block; font-size: .72rem; color: #586a66; margin-bottom: .45rem; }
.experiment-node strong { display: block; font-size: .86rem; overflow-wrap: anywhere; }
.experiment-node.good { background: #eaf5f0; border-color: #a7cbbb; }
.experiment-node.offline { background: #f9ece9; border-color: #d9aaa2; }
.experiment-node.changed { background: #f0eafb; border-color: #baaad7; }
.experiment-node.uncertain { background: #fff6dd; border-color: #dccc93; }
.experiment-arrow { font-size: 1.4rem; color: #647c75; }
.experiment-comparison { display: grid; gap: 1rem; }
.experiment-caption { font-size: .78rem; color: #596c65; margin: .5rem 0; }
.experiment-result { font-size: .95rem; line-height: 1.65; margin: 1rem 0 .5rem; }
.experiment-note { font-size: .72rem; color: #697873; margin: .5rem 0 0; }
.experiment-buffer { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.experiment-buffer > :last-child { grid-column: 1 / -1; }
@media (max-width: 600px) { .experiment { padding: .9rem; } .experiment-network { flex-wrap: wrap; } .experiment-node { flex-basis: 35%; } .experiment-arrow { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .experiment *, .stage-check { transition: none !important; } }

.experiment-node.blue { background: #e9f1fa; border-color: #b0c5df; }