.grade-calculator{--grade-start:5%;--grade-target:25%;margin:28px 0;border-top:1px solid #ccd4d3;padding-top:24px}
.grade-calculator h3{font-size:20px;margin-bottom:18px}
.grade-sliders{display:grid;gap:16px}
.grade-control{min-width:0}
.grade-control-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline}
.grade-control-heading label{font-weight:400}
.grade-control-heading output{font-weight:600;font-variant-numeric:tabular-nums}
.grade-control-heading label output{margin-left:8px}
.grade-control-heading>strong{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;color:#17513f;white-space:nowrap}
.grade-control input[type=range]{display:block;width:100%;height:30px;padding:0;margin:2px 0 0;appearance:none;-webkit-appearance:none;border:0;background:transparent;cursor:pointer;accent-color:#246c5a}
.grade-control input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:3px;background:#dce2e1}
.grade-control input[type=range]::-moz-range-track{height:8px;border-radius:3px;background:#dce2e1}
.grade-control input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#246c5a;border:2px solid #fff;box-shadow:0 0 0 1px #246c5a;margin-top:-6px}
.grade-control input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:#246c5a;border:2px solid #fff;box-shadow:0 0 0 1px #246c5a}
.public-grade-track{position:relative}
.public-grade-track input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#dce2e1 0 var(--grade-start),#93c9b7 var(--grade-start) var(--grade-target),#dce2e1 var(--grade-target) 100%)}
.public-grade-track input[type=range]::-moz-range-track{background:linear-gradient(to right,#dce2e1 0 var(--grade-start),#93c9b7 var(--grade-start) var(--grade-target),#dce2e1 var(--grade-target) 100%)}
.grade-target-marker{position:absolute;left:calc(10px + (100% - 20px) * var(--grade-target-fraction,.25));top:6px;width:2px;height:18px;background:#164e3e;pointer-events:none}
.grade-range-labels{position:relative;min-height:20px;font-size:14px;color:#42504e}
.grade-target-label{position:absolute;left:var(--grade-target);transform:translateX(-50%);font-size:14px;font-weight:600;color:#17513f;white-space:nowrap}
.grade-assumption{margin:18px 0;color:#42504e}
.grade-cost-scale{margin:4px 0 8px;line-height:1.5}
.grade-cost-example{margin:0}
.grade-cost-example summary{font-weight:400;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.grade-cost-example p{margin:10px 0 0}
.grade-summary{border-top:1px solid #ccd4d3;border-bottom:1px solid #ccd4d3;padding:20px 0;display:grid;grid-template-columns:max-content max-content;justify-content:end;gap:16px 40px;align-items:start}
.grade-report-field{display:grid;gap:10px}
.grade-report-field>div{display:flex;align-items:center;gap:8px;min-height:46px}
.grade-report-field input{width:76px}
.grade-result{display:grid;gap:10px;text-align:right}
.grade-result strong{font-size:24px;font-variant-numeric:tabular-nums;min-height:46px;display:flex;align-items:center;justify-content:flex-end;gap:6px}
.grade-result>span:last-child{color:#246c5a}
@media(max-width:560px){.grade-control-heading{gap:4px 8px}.grade-control-heading label,.grade-control-heading output{font-size:16px}.grade-control-heading>strong{font-size:20px}.grade-summary{grid-template-columns:1fr auto;gap:16px 24px}.grade-result strong{font-size:22px}}