.compound-interest-calculator{--color-background: whitesmoke;--color-foreground: #183d5e;container-type:inline-size;border-radius:12px;overflow:clip}.compound-interest-calculator>div{position:relative;display:grid;grid-template-columns:minmax(0, 1fr);row-gap:12px;background:var(--color-background);color:var(--color-foreground);padding-block:12px;padding-inline:24px}.compound-interest-calculator>div:first-of-type{padding-block-start:24px}.compound-interest-calculator>div:last-of-type{padding-block-end:24px}.compound-interest-calculator>div:nth-last-of-type(2){--color-background: #183d5e;--color-foreground: white;padding-block:24px;grid-template-columns:minmax(0, 1fr);align-items:center;column-gap:24px}@container (min-width: 414px){.compound-interest-calculator>div:nth-last-of-type(2){grid-template-columns:auto 1fr auto}}.compound-interest-calculator>div:has(button~input){display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto;align-items:stretch}.compound-interest-calculator>div:has(h3+p){display:grid;grid-template-columns:1fr auto;justify-content:space-between;align-items:center;column-gap:12px}.compound-interest-calculator h3{font-size:16px;grid-column:1/span 2}@container (min-width: 768px){.compound-interest-calculator h3{grid-column:1/span 1}}.compound-interest-calculator h3+p{word-break:break-all;font-size:18px}@container (min-width: 768px){.compound-interest-calculator h3+p{justify-self:end}}.compound-interest-calculator h3,.compound-interest-calculator p,.compound-interest-calculator strong{margin:0;color:var(--color-foreground)}.compound-interest-calculator label{grid-column:1/-1;font-weight:600}.compound-interest-calculator button{cursor:pointer;display:none;width:48px;background:#000;color:#fff;text-indent:-9999px;background-repeat:no-repeat;background-position:50% 50%;background-size:auto 50%}.compound-interest-calculator button.subtract{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27white%27 width=%2716%27 height=%2716%27%3E%3Cpath d=%27M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z%27 /%3E%3C/svg%3E")}.compound-interest-calculator button.add{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27white%27 width=%2716%27 height=%2716%27%3E%3Cpath d=%27M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z%27 /%3E%3C/svg%3E")}.compound-interest-calculator input[type=text],.compound-interest-calculator input[type=number]{grid-column:2/span 1;grid-row-start:2;background:#fff;border-radius:12px;padding:0;padding-block:12px;padding-inline:12px}.compound-interest-calculator input[type=text]:focus-visible,.compound-interest-calculator input[type=number]:focus-visible{outline-offset:0}.compound-interest-calculator .stepper{position:relative}.compound-interest-calculator .stepper output{background:#183d5e;color:#fff;border-radius:8px;padding:4px;font-size:12px;font-weight:bold;width:5ch;text-align:center;position:absolute;bottom:0%;left:50%;transform:translateX(-50%) translateY(-50%);display:none}.compound-interest-calculator .stepper input[type=range]{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;position:relative;top:-48px;width:100%;height:12px;background:color-mix(in srgb, #183d5e 20%, white 80%);border-radius:8px}.compound-interest-calculator .stepper input[type=range]:focus-visible{outline-offset:0}.compound-interest-calculator .stepper input[type=range]::-webkit-slider-thumb{cursor:pointer;-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:100%;background:#183d5e}.compound-interest-calculator .stepper input[type=range]::-moz-range-thumb{cursor:pointer;-moz-appearance:none;appearance:none;width:24px;height:24px;border-radius:100%;background:#183d5e}.compound-interest-calculator .stepper>div{position:relative;display:flex;align-items:stretch;width:100%;height:24px}.compound-interest-calculator .stepper>div>div{flex:1;border-inline:1px solid color-mix(in srgb, #183d5e 20%, white 80%)}.compound-interest-calculator .stepper>div>div:first-of-type{border-inline-start-width:2px}.compound-interest-calculator .stepper>div>div:last-of-type{border-inline-end-width:2px}.compound-interest-calculator .stepper>div>span{flex:1;text-align:center}.compound-interest-calculator .stepper>div.stepper-markers{width:calc(100% - 20px) !important;margin-inline:auto}.compound-interest-calculator .stepper>div.stepper-labels span{cursor:pointer}