.na-widget { width: min(760px, 100%); margin: 1.5rem auto 1.8rem; }
.na-live { display: none; }
.na-widget.is-ready .na-live { display: block; }
.na-widget.is-ready .na-fallback { display: none; }
.na-widget h4 { color: var(--na-primary); font-size: 1.08rem; margin: 0 0 .9rem; }
.na-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1.1rem; align-items: end; }
.na-controls label { display: block; font-size: .82rem; font-weight: 600; }
.na-controls output { float: right; color: var(--na-primary); font-variant-numeric: tabular-nums; }
.na-controls input { display: block; width: 100%; margin-top: .35rem; accent-color: var(--na-primary); }
.na-buttons { display: flex; gap: .5rem; flex-wrap: wrap; }
.na-buttons button { padding: .4rem .55rem; color: var(--bs-body-color); background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 5px; font: inherit; font-size: .79rem; cursor: pointer; }
.na-controls :focus-visible { outline: 3px solid var(--na-primary); outline-offset: 3px; }
.na-widget svg { display: block; width: 100%; height: auto; margin: .6rem 0; border: 1px solid var(--bs-border-color); border-radius: 7px; background: var(--bs-body-bg); }
.na-widget svg text { font: 13px "Latin Modern Sans", system-ui, sans-serif; fill: var(--bs-body-color); }
.na-grid { stroke: var(--bs-border-color); opacity: .6; }
.na-axis { stroke: var(--bs-secondary-color); }
.na-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .78rem; margin-top: 1rem; }
.na-key { display: inline-flex; gap: .4rem; align-items: center; }
.na-key::before { display: inline-block; content: ""; width: 9px; height: 9px; }
.na-current::before { background: var(--na-primary); border-radius: 50%; }
.na-optimum::before { background: var(--na-accent); transform: rotate(45deg); }
.na-equal::before { border: 2px solid var(--bs-secondary-color); }
.na-readout { font-size: .86rem; line-height: 1.5; margin: .7rem 0; min-height: 3em; }
.na-note, .na-widget figcaption { color: var(--bs-secondary-color); font-size: .79rem; line-height: 1.5; }
.na-widget figcaption { margin-top: .65rem; font-size: .85rem; }
body.quarto-dark .na-widget { --na-primary: color-mix(in srgb, var(--na-palette-primary) 68%, white); --na-accent: color-mix(in srgb, var(--na-palette-accent) 68%, white); }
@media (max-width: 560px) { .na-controls { grid-template-columns: 1fr; } }
@media print { .na-widget.is-ready .na-live { display: none; } .na-widget.is-ready .na-fallback { display: block; } }