.widgets--success-calculator {
	padding: 5rem var(--pd);
	background: var(--bg);
	color: var(--g6);
	scroll-margin-top: 7rem;
	[hidden] { display: none !important; }
	> .intro { max-width: 52rem; margin-bottom: 2.5rem; }
	h2 { margin: 0 0 1rem; font-size: 2.4rem; font-weight: 800; line-height: 1.2; text-wrap: balance; }
	.text { color: var(--g4); line-height: 1.65; }
	.text > :first-child, .methodology > :first-child, .selection-note > :first-child { margin-top: 0; }
	.text > :last-child, .methodology > :last-child, .selection-note > :last-child { margin-bottom: 0; }
	.filters {
		display: grid;
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
		gap: 1.5rem;
		padding: 1.5rem;
		border-radius: 1rem;
		background: var(--c8);
		label { display: flex; min-width: 0; flex-direction: column; gap: 0.75rem; }
		label > span { font-weight: 700; font-size: 0.9rem; }
		select { width: 100%; min-height: 3.25rem; padding: 0.75rem; border: var(--px) solid var(--c6); border-radius: 0.5rem; background: var(--bg); color: var(--c2); font-size: 0.95rem; }
		select:focus-visible { outline: 0.2rem solid var(--c3); outline-offset: 0.2rem; }
		select:disabled { color: var(--g4); opacity: 1; background: var(--g1); }
	}
	.context { margin: 2rem 0 1.5rem; font-weight: 700; font-size: 0.95rem; line-height: 1.6; }
	.context:empty, .selection-note:empty { display: none; }
	.empty { padding: 1.5rem; background: var(--c8); border-left: 0.25rem solid var(--c3); line-height: 1.6; }
	.results { padding: 2rem; border: var(--px) solid var(--c6); border-radius: 1.25rem; }
	.legend { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 2rem; }
	.legend > span { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; line-height: 1.5; }
	.legend i { flex: 0 0 1.5rem; height: 0.75rem; border-radius: 0.2rem; }
	.legend .observed, .sc-bar.observed .sc-fill { background: var(--c1); }
	.legend .model, .sc-bar.model .sc-fill { background: repeating-linear-gradient(135deg, var(--c6) 0, var(--c6) 0.4rem, var(--c7) 0.4rem, var(--c7) 0.8rem); border: var(--px) solid var(--c3); }
	.chart { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; }
	.scale { height: 12rem; margin-top: 2rem; display: flex; flex-direction: column; justify-content: space-between; font-size: 0.8rem; color: var(--g4); text-align: right; }
	.plot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
	.attempt { min-width: 0; }
	.bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
	.sc-bar { min-width: 0; }
	.sc-bar .sc-value { display: block; height: 2rem; text-align: center; font-size: 1.15rem; font-weight: 800; color: var(--c2); white-space: nowrap; font-variant-numeric: tabular-nums; }
	.sc-track { position: relative; height: 12rem; background: var(--g1); border-bottom: var(--px) solid var(--c6); }
	.sc-fill { position: absolute; inset: auto 0 0; border-radius: 0.5rem 0.5rem 0 0; }
	.unobserved .sc-track { background: transparent; border: var(--px) dashed var(--g2); }
	.unobserved .sc-value { color: var(--g4); }
	.attempt-label { margin-top: 1rem; font-size: 0.95rem; font-weight: 700; text-align: center; line-height: 1.4; }
	.unobserved-note { margin: 1.5rem 0 0; font-size: 0.85rem; color: var(--g4); line-height: 1.5; }
	.selection-note { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 0.75rem; background: var(--c8); font-size: 0.9rem; line-height: 1.6; }
	.methodology, .fallback { max-width: 70rem; margin-top: 1.5rem; font-size: 0.85rem; line-height: 1.65; color: var(--g4); }
	.sr-only { position: absolute; width: var(--px); height: var(--px); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	@media (max-width: 1279px) { .plot { gap: 2rem; } }
	@media (max-width: 991px) { .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .filters > label:first-child { grid-column: 1 / -1; } .plot { gap: 1.5rem; } }
	@media (max-width: 767px) {
		padding-block: 4rem;
		h2 { font-size: 2rem; }
		.results { padding: 1.25rem; }
		.plot { gap: 1rem; }
		.chart { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; }
		.bars { gap: 0.5rem; }
		.sc-bar .sc-value { font-size: 0.9rem; }
		.attempt-label { font-size: 0.85rem; }
	}
	@media (max-width: 540px) {
		padding: 3rem 1rem;
		.filters { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem; }
		.results { padding: 1rem 0.5rem; }
		.legend { flex-direction: column; gap: 0.75rem; }
		.chart { grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.25rem; }
		.plot { gap: 0.5rem; }
		.bars { gap: 0.25rem; }
		.sc-bar .sc-value { font-size: 0.7rem; margin-inline: -0.125rem; }
		.attempt-label { font-size: 0.75rem; }
	}
}