.rudlab-root { color: #234c50; }
.rudlab-root .rudlab-control { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.rudlab-control > input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: #287765; }
.rudlab-number { display: flex; align-items: center; gap: 7px; color: #607b73; font-size: 13px; font-weight: 500; }
.rudlab-number input { width: 85px; min-height: 38px; padding: 7px; border: 1px solid #bfcec6; border-radius: 7px; background: #fffefa; color: #234b47; font: inherit; font-variant-numeric: tabular-nums; }
.rudlab-number input[aria-invalid="true"] { border-color: #ac4833; background: #fff2eb; }
.rudlab-root .rudlab-error { padding: 10px 12px; border-radius: 8px; background: #faeae2; color: #8a3324; font-size: 13px; line-height: 1.6; }
.rudlab-error[hidden] { display: none; }
.rudlab-comparison { padding: 13px; background: #e9f1e9; border-left: 3px solid #468269; border-radius: 0 8px 8px 0; color: #2c5c49; font-size: 13px; line-height: 1.8; }
.rudlab-root button:disabled { cursor: default; opacity: .7; }
.rudlab-root .experiment-canvas { display: block; width: 100%; height: auto; aspect-ratio: 760 / 480; }
@media (max-width: 700px) { .rudlab-root .experiment-stagebar { flex-wrap: wrap; gap: 10px; } .rudlab-number input { width: 76px; } }