.js-widget { width: min(760px, 100%); margin: 1.5rem auto 1.8rem; }
.js-live { display: none; }
.js-widget.is-ready .js-live { display: block; }
.js-widget.is-ready .js-fallback { display: none; }
.js-widget h4 { font-size: 1.08rem; margin: 0 0 .8rem; color: var(--js-primary); }
.js-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.2rem; align-items: end; }
.js-controls label { display: block; font-size: .83rem; font-weight: 600; }
.js-controls output { float: right; color: var(--js-primary); font-variant-numeric: tabular-nums; }
.js-controls input { display: block; width: 100%; accent-color: var(--js-primary); margin-top: .35rem; }
.js-controls select, .js-controls button { width: 100%; border: 1px solid var(--bs-border-color); border-radius: 5px; padding: .4rem; color: var(--bs-body-color); background: var(--bs-body-bg); font: inherit; }
.js-controls button { font-size: .83rem; cursor: pointer; }
.js-controls select { margin-top: .3rem; }
.js-controls :focus-visible { outline: 3px solid var(--js-primary); outline-offset: 3px; }
.js-widget svg { display: block; width: 100%; height: auto; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 7px; margin: .6rem 0; overflow: hidden; }
.js-widget svg text { fill: var(--bs-body-color); font: 12px "Latin Modern Sans", system-ui, sans-serif; }
.js-widget .js-axis-label { font-size: 13px; }
.js-grid { stroke: var(--bs-border-color); stroke-width: 1; opacity: .6; }
.js-axis { stroke: var(--bs-secondary-color); stroke-width: 1; }
.js-curve { fill: none; stroke: var(--js-primary); stroke-width: 2.6; }
.js-bias-line { stroke: var(--js-accent); stroke-dasharray: 7 4; }
.js-variance-line { stroke: var(--js-muted); stroke-dasharray: 2 4; }
.js-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .77rem; margin-top: .85rem; }
.js-key { display: inline-flex; align-items: center; gap: .4rem; }
.js-key::before { content: ""; width: 19px; height: 3px; background: var(--js-primary); display: inline-block; }
.js-bias::before { background: none; height: 0; border-top: 3px dashed var(--js-accent); }
.js-variance::before { background: none; height: 0; border-top: 3px dotted var(--js-muted); }
.js-ring::before { width: 9px; height: 9px; background: none; border: 2px solid var(--js-muted); border-radius: 50%; }
.js-dot::before { width: 9px; height: 9px; border-radius: 50%; }
.js-cross::before { content: "×"; height: auto; width: auto; background: none; color: var(--js-accent); font-size: 1.15rem; line-height: .8; }
.js-readout { font-size: .85rem; line-height: 1.5; margin: .65rem 0; min-height: 3em; font-variant-numeric: tabular-nums; }
.js-note, .js-widget figcaption { font-size: .82rem; color: var(--bs-secondary-color); margin-top: .6rem; }
body.quarto-dark .js-widget { --js-primary: color-mix(in srgb, var(--js-palette-primary) 68%, white); --js-accent: color-mix(in srgb, var(--js-palette-accent) 68%, white); --js-muted: color-mix(in srgb, var(--js-palette-muted) 68%, white); }
@media (max-width: 560px) { .js-controls { grid-template-columns: 1fr; } }
@media print { .js-widget.is-ready .js-live { display: none; } .js-widget.is-ready .js-fallback { display: block; } }