body>main{& h2,& h3{border:none;margin:0;padding:0}& section[aria-labelledby=calculator]{& h2{color:var(--quinary-dark)}&>p{margin:0}& form{& fieldset{margin-bottom:var(--space-2);& legend{font-size:var(--text-lg);padding:var(--space-2) 0 var(--space-3)}&:first-of-type>div{border-radius:var(--radius-2xl);border:var(--bw-xl) solid transparent;background-image:linear-gradient(white, white), linear-gradient(to right, var(--primary), var(--quaternary));background-origin:border-box;background-clip:padding-box,border-box;grid-template-columns:repeat(2,1fr);width:min(300px,100%);display:grid;position:relative;overflow:hidden;& label{padding:var(--space-3) 0;font-size:var(--text-lg);font-weight:var(--fw-medium);cursor:pointer;z-index:1;justify-content:center;display:flex;&:first-of-type:has(input:checked)~span{background:var(--primary);transform:translate(0)}&:nth-of-type(2):has(input:checked)~span{background:var(--quaternary);transform:translate(100%)}}& span{width:50%;height:100%;transition-duration:var(--duration-fast);position:absolute}}&:nth-of-type(2)>div{gap:var(--space-2);flex-wrap:wrap;display:flex;& label{padding:var(--space-2) var(--space-4);font-weight:var(--fw-medium);border-radius:var(--radius-full);border:var(--bw-medium) solid var(--combined);cursor:pointer;transition-duration:var(--duration-fast);background:#fff;&:hover{background:color-mix(in srgb, var(--combined) 25%, white)}&:has(input:checked){background:var(--combined)}&:has(input:focus-visible){outline:var(--bw-medium) solid var(--quinary-dark)}& input{appearance:none;position:absolute}}}&[name]{padding:var(--space-4);margin-top:var(--space-4);border-radius:var(--radius-xl);outline:var(--bw-medium) solid var(--combined);background:#fff;& legend{float:left;width:100%;font-family:var(--font-title);font-weight:var(--fw-semibold);color:var(--quinary-dark);padding-top:0}& h3{clear:both;margin-top:var(--space-3);padding:var(--space-2) var(--space-3);font-size:var(--text-md);color:var(--neutral-800);background:color-mix(in srgb, var(--combined) 30%, white);border-radius:var(--radius-md);justify-content:space-between;display:flex;& output{font-variant-numeric:tabular-nums}}& ol{clear:both;padding:0;list-style:none;& li{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-1);border-bottom:var(--bw-thin) solid var(--neutral-200);grid-template-columns:1fr minmax(90px,130px) 70px 60px;grid-template-areas:"label label manual points";display:grid;&:last-child{border-bottom:none}&>label:first-child{grid-area:label;grid-template-columns:subgrid;align-items:center;display:grid;& span{font-weight:var(--fw-medium)}& input{width:100%;padding:var(--space-2);font-size:var(--text-md);text-align:right;font-variant-numeric:tabular-nums;border-radius:var(--radius-sm);border:var(--bw-medium) solid var(--neutral-300);transition:var(--duration-fast);outline:none;&:hover{border-color:var(--combined)}&:focus{border-color:var(--quinary-dark);background:color-mix(in srgb, var(--combined) 10%, white)}&:invalid{border-color:var(--error);background:color-mix(in srgb, var(--error) 5%, white)}}}&>label:nth-of-type(2){align-items:center;gap:var(--space-1);font-size:var(--text-xs);color:var(--neutral-600);cursor:pointer;grid-area:manual;display:flex;& input{accent-color:var(--quinary-dark)}}& output{text-align:right;font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;color:var(--quinary-dark);grid-area:points}@media (width<=520px){row-gap:var(--space-1);grid-template-columns:1fr minmax(85px,110px) 48px;grid-template-areas:"label label points""manual manual manual"}}}}}& p{font-size:var(--text-md);color:var(--neutral-50);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--error) 75%, transparent);transition-duration:var(--duration-fast);&:not(:empty){padding:var(--space-2);margin:var(--space-3) 0}}&>div{justify-items:center;gap:var(--space-1);margin:var(--space-5) 0 var(--space-4);padding:var(--space-4);border-radius:var(--radius-xl);background:linear-gradient(135deg, color-mix(in srgb, var(--combined) 55%, white), color-mix(in srgb, var(--primary-light) 45%, white));display:grid;& span{font-size:var(--text-sm);letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--neutral-700)}& #combined-total{font-family:var(--font-title);font-size:var(--text-5xl);font-weight:var(--fw-bold);line-height:var(--lh-none);font-variant-numeric:tabular-nums;color:var(--neutral-900)}& #combined-progress{font-size:var(--text-sm);color:var(--neutral-700)}}& button{width:100%;padding:var(--space-2);font-size:var(--text-xl);font-weight:var(--fw-medium);letter-spacing:var(--ls-wider);border-radius:var(--radius-lg);background:var(--combined);cursor:pointer;transition-duration:var(--duration-normal);&:hover{background:var(--quinary-hover)}}}}& section[aria-labelledby=combined-results]{padding:0;position:relative;& header{padding:var(--space-4) var(--space-4) 0;justify-content:space-between;align-items:center;display:flex;& h2{color:var(--quinary-dark)}& button{padding:var(--space-2) var(--space-3);font-size:var(--text-md);color:var(--neutral-50);background:var(--senary);border-radius:var(--radius-lg);cursor:pointer;transition-duration:var(--duration-normal);&:hover{background:var(--senary-hover)}}}& table{table-layout:fixed;border-collapse:collapse;border-top:var(--bw-thick) solid var(--neutral-300);border-radius:0 0 var(--radius-2xl) var(--radius-2xl);background:#fff;width:100%;overflow:hidden;& caption{padding:0 0 var(--space-3) var(--space-4);font-size:var(--text-sm);text-align:left;color:var(--neutral-800)}& th{padding:var(--space-3) 0;font-size:var(--text-lg);font-weight:var(--fw-regular);background:var(--quinary)}& td{padding:var(--space-3) var(--space-2);text-align:center;font-size:var(--text-lg);border-top:var(--bw-medium) solid var(--neutral-300)}& tbody tr{&:not([id]){cursor:pointer;transition:var(--duration-fast);outline:none;&:is(:hover,:focus-visible) td{background:color-mix(in srgb, var(--quinary) 25%, transparent)}}& button{border-radius:var(--radius-full);background:color-mix(in srgb, var(--combined) 45%, white);cursor:pointer;width:2rem;height:2rem;transition:var(--duration-fast);place-items:center;display:inline-grid;&:hover{background:var(--combined)}& svg{width:.8rem;fill:var(--neutral-800);transition-duration:var(--duration-normal)}&[aria-expanded=true] svg{rotate:180deg}}&[id] td{padding:var(--space-4);background:color-mix(in srgb, var(--combined) 10%, white);border-top:none;&>div{align-items:center;gap:var(--space-4);grid-template-columns:minmax(220px,300px) 1fr;display:grid;@media (width<=650px){grid-template-columns:1fr}}& figure{margin:0;& svg{width:100%;overflow:visible;& g:first-of-type{fill:none;stroke:var(--neutral-300);stroke-width:1px}&>polygon{fill:color-mix(in srgb, var(--combined) 55%, transparent);stroke:var(--quinary-dark);stroke-width:2px;stroke-linejoin:round}& text{font-size:12px;font-weight:var(--fw-medium);fill:var(--neutral-700)}}& figcaption{margin-top:var(--space-1);font-size:var(--text-xs);color:var(--neutral-600)}}& dl{gap:var(--space-1);text-align:left;display:grid;& div{justify-content:space-between;gap:var(--space-2);padding:var(--space-1) 0;border-bottom:var(--bw-thin) dashed var(--neutral-300);font-size:var(--text-sm);display:flex}& dt{color:var(--neutral-700)}& dd{font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}}}}}&>button{translate:var(--space-2) -50%;padding:var(--space-2);font-size:var(--text-sm);color:#fff;background:var(--senary);border-radius:var(--radius-md);box-shadow:var(--shadow-md);cursor:pointer;z-index:2;position:absolute;& svg{fill:#fff;width:var(--text-xl);height:auto}&:after{content:"";border-style:solid;border-width:8px;border-color:transparent var(--senary) transparent transparent;transition-duration:var(--duration-slow);margin-top:-8px;position:absolute;top:50%;right:100%}&:hover{background:var(--senary-hover)}@media (width<=650px){translate:-50% -50%}}}& section[aria-labelledby=about-combined]{outline:var(--bw-medium) solid var(--primary-hover);& h2{color:var(--primary-dark);margin-bottom:var(--space-3)}& details{margin-bottom:var(--space-2);border-radius:var(--radius-md);outline:var(--bw-thin) solid var(--primary);background:#fff;&[open]{background:color-mix(in srgb, var(--primary) 10%, white);outline-color:var(--primary-hover)}&[open] summary{color:var(--primary-dark);background:color-mix(in srgb, var(--primary) 20%, white)}&[open] summary svg{transform:rotate(180deg)}& summary{padding:var(--space-3);font-weight:var(--fw-semibold);cursor:pointer;justify-content:space-between;align-items:center;display:flex;& svg{width:var(--text-md);fill:var(--primary-dark);transition-duration:var(--duration-normal)}}& p{padding:0 var(--space-3) var(--space-3);margin:0}}& a:has(>svg){--a-background:var(--primary-hover);--text-color:var(--primary-dark);width:fit-content;margin-top:var(--space-4);display:block}}& dialog{max-width:var(--container-dialog);padding:var(--space-4) var(--space-6);text-align:center;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);outline:var(--bw-medium) solid var(--senary);background:#fff;margin:auto;position:fixed;inset:0;&::backdrop{backdrop-filter:blur(2px)}& h2{color:var(--senary-dark);margin-bottom:var(--space-2)}& menu{gap:var(--space-3);margin-top:var(--space-5);padding:0;display:flex;& button{padding:var(--space-3);font-size:var(--text-lg);border-radius:var(--radius-md);background:var(--neutral-300);cursor:pointer;flex:1;&:last-of-type{color:#fff;background:var(--senary)}}}}}