.lv-circle-ratios .cr-label { display: grid; gap: .4rem; color: var(--lv-ink); font-weight: 600; }
.lv-circle-ratios .cr-select { width: 100%; padding: .6rem; border: 1px solid var(--lv-edge); border-radius: .5rem; background: var(--reading-surface,#01040e); color: var(--lv-ink); color-scheme: dark; font: inherit; }
.lv-circle-ratios :is(.cr-status,.cr-info,.cr-note) { color: var(--lv-ink); line-height: 1.5; margin: 0; }
.lv-circle-ratios .lv-rcard { border: 1px solid var(--lv-edge); box-shadow: none; }
.lv-circle-ratios .lv-rval { font-size: clamp(1.05rem,3vw,1.5rem); }
html:not([data-theme="light"]) .lv-circle-ratios :is(.lv-rcard,.lx-viz-button) { background: var(--reading-surface,#01040e); }
html:not([data-theme="light"]) .lv-circle-ratios .lx-viz-button { color: var(--lv-ink); border-color: var(--lv-edge); box-shadow: none; }
html[data-theme="light"] .lv-circle-ratios .cr-select { color: #17243b; color-scheme: light; }
@media (max-width: 600px) { .lv-circle-ratios .lv-readout:has(> .lv-rcard) { grid-template-columns: 1fr; } }


.lv-circle-ratios .cr-sliders { display: grid; gap: 1rem; }
.lv-circle-ratios .cr-sliders[hidden] { display: none; }
.lv-circle-ratios .cr-equation { color: var(--lv-ink); line-height: 1.5; margin: 0; }
.lv-circle-ratios .cr-axis { stroke: #8fa8cf; stroke-width: 1; }
.lv-circle-ratios .cr-circle { fill: none; stroke: #8fa8cf; stroke-width: 1.5; opacity: .65; }
.lv-circle-ratios :is(.cr-tick,.cr-axislabel) { fill: #c0cddd; font-size: 11px; }