body>main{margin-bottom:var(--space-6xl);&>section h2,& h3{margin:0}}main>section{margin-bottom:var(--space-4xl)}main>p:nth-of-type(2){outline:var(--bw-medium) solid var(--quaternary);border-radius:var(--br-xl);padding:var(--space-lg) var(--space-xl);width:var(--container-outside);box-shadow:var(--shadow-md);color:var(--gray-950);background:color-mix(in srgb, var(--quaternary-light) 25%, var(--gray-50));font-size:var(--fs-md);line-height:var(--lh-normal);text-align:center;margin:0 auto var(--space-2xl) auto}main>section[aria-labelledby=about-calculator]{outline:var(--bw-medium) solid var(--secondary);margin-bottom:var(--space-2xl);padding:0;& details{border-radius:var(--br-xl);overflow:hidden;& summary{cursor:pointer;padding:var(--space-lg) var(--space-xl);transition-duration:var(--transition-base);font-size:var(--fs-base);color:var(--gray-800);grid-template-columns:1fr auto;align-items:center;display:grid;&:hover{background:var(--gray-200)}& h2{color:var(--secondary-dark)}& svg{width:var(--fs-xl);height:auto;fill:var(--secondary);transition-duration:var(--transition-base)}}&[open]{& summary{& svg{transform:rotate(180deg)}}}& p{font-size:var(--fs-base);line-height:var(--lh-relaxed);color:var(--gray-800);padding:var(--space-sm) var(--space-xl);&:first-of-type{padding-top:var(--space-lg)}}& h3{font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--secondary-hover);padding:var(--space-sm) var(--space-xl)}& a{width:calc(100% - 2 * var(--space-xl));text-align:center;margin:var(--space-md) var(--space-xl);padding:var(--space-sm);outline:var(--bw-xl) solid var(--secondary-dark);background:var(--secondary-dark);color:var(--white);border-radius:var(--br-xs);font-size:var(--fs-md);transition-duration:var(--transition-base);text-decoration:none;display:block;&:hover{outline-color:var(--secondary);color:var(--secondary)}}& ol{padding:var(--space-sm) var(--space-xl) var(--space-lg);list-style-position:inside;& li{font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--gray-800);margin-bottom:var(--space-sm);&::marker,& strong{color:var(--secondary-hover);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide)}}}}}main>section[aria-labelledby=form-calculator]{& h2{color:var(--quinary-dark)}&>p{margin:var(--space-sm) 0;font-size:var(--fs-base)}& form{& fieldset{margin-bottom:var(--space-lg);border:none;& legend{font-size:var(--fs-lg);padding:var(--space-md) 0}& input[type=radio]{display:none}&:first-of-type{&>div{width:var(--container-inside);border-radius:var(--br-xl);border:var(--bw-xl) solid transparent;background-image:linear-gradient(var(--white), var(--white)), linear-gradient(to right, var(--primary), var(--quaternary));background-origin:border-box;background-clip:padding-box,border-box,border-box,border-box;grid-template-columns:repeat(3,1fr);align-items:center;display:grid;position:relative;overflow:hidden;& label{padding:var(--space-lg) 0;cursor:pointer;font-size:var(--fs-lg);z-index:1;justify-content:center;align-items: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:linear-gradient(to right, var(--primary), var(--quaternary));transform:translate(100%)}&:nth-of-type(3):has(input:checked)~span{background:var(--quaternary);transform:translate(200%)}}& span{width:33.3333%;height:100%;transition-duration:var(--transition-fast);position:absolute}}}&:nth-of-type(2){&>div{border-radius:var(--br-xl);border:var(--bw-xl) solid transparent;background:linear-gradient(white, white) padding-box, radial-gradient(24% 50% at 5% 20%, var(--sprint) 0 45%, transparent 100%), radial-gradient(24% 50% at 25% 20%, var(--middle) 0 45%, transparent 100%), radial-gradient(24% 50% at 45% 20%, var(--long) 0 45%, transparent 100%), radial-gradient(24% 50% at 65% 20%, var(--hurdles) 0 45%, transparent 100%), radial-gradient(24% 50% at 85% 20%, var(--road) 0 45%, transparent 100%), radial-gradient(24% 50% at 5% 80%, var(--walk-road) 0 45%, transparent 100%), radial-gradient(24% 50% at 25% 80%, var(--walk-track) 0 45%, transparent 100%), radial-gradient(24% 50% at 45% 80%, var(--field) 0 45%, transparent 100%), radial-gradient(24% 50% at 65% 80%, var(--combined) 0 45%, transparent 100%), radial-gradient(24% 50% at 85% 80%, var(--relays) 0 45%, transparent 100%);background-origin:border-box;background-clip:padding-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box;grid-template-columns:repeat(5,1fr);display:grid;position:relative;overflow:hidden;@media (width<=650px){background:linear-gradient(white, white) padding-box, radial-gradient(40% 18% at 25% 10%, var(--sprint) 0 45%, transparent 100%), radial-gradient(40% 18% at 75% 10%, var(--middle) 0 45%, transparent 100%), radial-gradient(40% 18% at 25% 30%, var(--long) 0 45%, transparent 100%), radial-gradient(40% 18% at 75% 30%, var(--hurdles) 0 45%, transparent 100%), radial-gradient(40% 18% at 25% 50%, var(--road) 0 45%, transparent 100%), radial-gradient(40% 18% at 75% 50%, var(--walk-road) 0 45%, transparent 100%), radial-gradient(40% 18% at 25% 70%, var(--walk-track) 0 45%, transparent 100%), radial-gradient(40% 18% at 75% 70%, var(--field) 0 45%, transparent 100%), radial-gradient(40% 18% at 25% 90%, var(--combined) 0 45%, transparent 100%), radial-gradient(40% 18% at 75% 90%, var(--relays) 0 45%, transparent 100%);background-origin:border-box;background-clip:padding-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box;grid-template-columns:repeat(2,1fr)}& label{padding:var(--space-lg) 0;cursor:pointer;font-size:var(--fs-md);z-index:1;justify-content:center;align-items:center;display:flex;&.disabled{color:var(--gray-700);background:var(--gray-300);cursor:not-allowed;opacity:.6;transition-duration:var(--transition-fast)}&:has(input:checked){font-weight:var(--fw-medium)}&:first-of-type:has(input:checked)~span{background:var(--sprint);transform:translate(0)translateY(0)}&:nth-of-type(2):has(input:checked)~span{background:var(--middle);transform:translate(100%)translateY(0)}&:nth-of-type(3):has(input:checked)~span{background:var(--long);transform:translate(200%)translateY(0)}&:nth-of-type(4):has(input:checked)~span{background:var(--hurdles);transform:translate(300%)translateY(0)}&:nth-of-type(5):has(input:checked)~span{background:var(--road);transform:translate(400%)translateY(0)}&:nth-of-type(6):has(input:checked)~span{background:var(--walk-road);transform:translate(0)translateY(100%)}&:nth-of-type(7):has(input:checked)~span{background:var(--walk-track);transform:translate(100%)translateY(100%)}&:nth-of-type(8):has(input:checked)~span{background:var(--field);transform:translate(200%)translateY(100%)}&:nth-of-type(9):has(input:checked)~span{background:var(--combined);transform:translate(300%)translateY(100%)}&:nth-of-type(10):has(input:checked)~span{background:var(--relays);transform:translate(400%)translateY(100%)}@media (width<=650px){&:first-of-type:has(input:checked)~span{transform:translate(0)}&:nth-of-type(2):has(input:checked)~span{transform:translate(100%)}&:nth-of-type(3):has(input:checked)~span{transform:translateY(100%)}&:nth-of-type(4):has(input:checked)~span{transform:translate(100%,100%)}&:nth-of-type(5):has(input:checked)~span{transform:translateY(200%)}&:nth-of-type(6):has(input:checked)~span{transform:translate(100%,200%)}&:nth-of-type(7):has(input:checked)~span{transform:translateY(300%)}&:nth-of-type(8):has(input:checked)~span{transform:translate(100%,300%)}&:nth-of-type(9):has(input:checked)~span{transform:translateY(400%)}&:nth-of-type(10):has(input:checked)~span{transform:translate(100%,400%)}}}& span{width:20%;height:50%;transition-duration:var(--transition-fast);position:absolute;@media (width<=650px){width:50%;height:20%}}}}&:nth-of-type(3){& label[for=eventOptions]{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}& select{font-size:var(--fs-md);background:var(--tertiary);border-radius:var(--br-xs);width:100%;padding:var(--space-sm);cursor:pointer;transition-duration:var(--transition-base);border:none;& option.empty{background:var(--tertiary)}&.sprint,& option.sprint{background:var(--sprint)}&.middle,& option.middle{background:var(--middle)}&.long,& option.long{background:var(--long)}&.hurdles,& option.hurdles{background:var(--hurdles)}&.road,& option.road{background:var(--road)}&.field,& option.field{background:var(--field)}&.combined,& option.combined{background:var(--combined)}&.walk-road,& option.walk-road{background:var(--walk-road)}&.walk-track,& option.walk-track{background:var(--walk-track)}&.relays,& option.relays{background:var(--relays)}}}&:nth-of-type(4){gap:var(--space-md);flex-direction:column;display:flex;&>div{&:first-of-type{width:var(--container-inside-sm);border-radius:var(--br-md);border:var(--bw-xl) solid transparent;background-image:linear-gradient(var(--white), var(--white)), linear-gradient(to right, var(--secondary) 47.5%, color-mix(in srgb, var(--septenary) 70%, transparent) 52.5%);background-origin:border-box;background-clip:content-box,border-box;grid-template-columns:repeat(2,1fr);display:grid;position:relative;overflow:hidden;&:has(label:first-of-type input:checked)~div:nth-of-type(2),&:has(label:last-of-type input:checked)~div:last-of-type{display:block}& label{text-align:center;cursor:pointer;color:var(--black);font-size:var(--fs-md);padding:var(--space-sm) 0;z-index:1;&:first-of-type:has(input:checked)~span{background:var(--secondary);transform:translate(0)}&:last-of-type:has(input:checked)~span{background:color-mix(in srgb, var(--septenary) 70%, transparent);transform:translate(100%)}}& span{width:50%;height:100%;transition-duration:var(--transition-fast);position:absolute}}&:nth-of-type(2),&:last-of-type{display:none;& label{& span{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);color:var(--secondary-hover)}& input{font-size:var(--fs-lg);width:100%;margin-top:var(--space-sm);padding:var(--space-sm);border-radius:var(--br-xs);border:var(--bw-medium) solid var(--gray-300);font-family:var(--font-primary);-moz-appearance:textfield;appearance:textfield;outline:none;transition:all .5s cubic-bezier(.19,1,.22,1);&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}&:hover{border-color:var(--secondary-light)}&:focus{border-color:var(--secondary-hover);background:color-mix(in srgb, var(--secondary-hover) 5%, transparent)}&:active{transform:scale(.98)}&:invalid{border-color:var(--error);background:color-mix(in srgb, var(--error) 5%, transparent)}}}& small{padding-top:var(--space-md);font-size:var(--fs-sm);letter-spacing:var(--ls-medium);color:var(--secondary-hover)}}&:last-of-type{& label{& span{color:var(--septenary)}& input{&:hover{border-color:var(--septenary-light)}&:focus{border-color:var(--septenary);background:color-mix(in srgb, var(--septenary) 5%, transparent)}}}& small{color:var(--septenary)}}}}}& p{font-size:var(--fs-lg);color:var(--gray-50);border-radius:var(--br-xs);margin-bottom:var(--space-lg);padding:var(--space-sm);background:color-mix(in srgb, var(--error) 75%, transparent);transition-duration:var(--transition-fast)}& button{font-size:var(--fs-xl);width:100%;padding:var(--space-sm);background:var(--secondary);border-radius:var(--br-xs);font-family:var(--font-primary);cursor:pointer;transition-duration:var(--transition-base);letter-spacing:var(--ls-wide);border:none;&:hover{background:var(--secondary-hover)}}&:has(fieldset:nth-of-type(4) div:first-of-type label:last-of-type input:checked) button{background:color-mix(in srgb, var(--septenary) 70%, transparent);&:hover{background:var(--septenary)}}}}main>aside[aria-labelledby=google-sheets],main>aside[aria-labelledby=javascript]{--promo-color:var(--google-sheets-primary);column-gap:var(--space-lg);row-gap:var(--space-sm);margin:calc(-1 * var(--space-2xl)) auto var(--space-2xl);background:color-mix(in srgb, var(--promo-color) 3.5%, var(--gray-50));outline:var(--bw-medium) solid var(--promo-color);grid-template-columns:auto 1fr;grid-template-areas:"icon title close""text text text""cta cta cta";align-items:center;display:grid;&:has(label>input[type=checkbox]:checked){display:none}& svg{width:var(--fs-3xl);grid-area:icon;height:auto}& h2{color:var(--promo-color);font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide);grid-area:title;margin:0}& p{color:var(--gray-800);line-height:var(--lh-normal);grid-area:text;margin:0}& a{margin-top:var(--space-sm);padding:var(--space-sm) var(--space-xl);border-radius:var(--br-sm);background:var(--promo-color);color:var(--gray-50);font-weight:var(--fw-semibold);letter-spacing:var(--ls-extra-wide);transition-duration:var(--transition-base);grid-area:cta;justify-self:start;text-decoration:none;&:hover{background:color-mix(in srgb, var(--promo-color) 75%, var(--black));color:var(--white)}}& label{color:var(--gray-950);cursor:pointer;grid-area:close;display:inline-flex;&:hover{& svg{stroke:var(--error-hover)}}& input[type=checkbox]{opacity:0;cursor:pointer;position:absolute}& svg{width:var(--fs-lg);stroke:currentColor;height:auto;transition-duration:var(--transition-slow)}}}main>aside[aria-labelledby=javascript]{--promo-color:var(--javascript);& h2{color:color-mix(in srgb, var(--javascript) 65%, var(--black))}& a{color:var(--javascript-secondary);&:hover{color:color-mix(in srgb, var(--javascript-secondary) 75%, var(--black))}}}main>section[aria-labelledby=results-calculator]{margin-bottom:var(--space-6xl);padding:0;& header{padding:var(--space-lg);justify-content:space-between;align-items:center;padding-bottom:0;display:flex;& h2{color:var(--quinary-dark)}& button{font-size:var(--fs-md);padding:var(--space-md) var(--space-lg);background:var(--error);color:var(--white);border-radius:var(--br-md);cursor:pointer;transition-duration:var(--transition-base);border:none;&:hover{background:var(--error-hover)}}}& table{border-top:var(--bw-thick) solid var(--gray-300);table-layout:fixed;border-radius:0 0 var(--br-xl) var(--br-xl);background:var(--white);border-collapse:collapse;width:100%;overflow:hidden;& caption{font-size:var(--fs-sm);text-align:left;padding:0 0 var(--space-md) var(--space-lg);color:var(--gray-800)}& thead{& tr{&.pace-mode th{background:var(--senary-light);cursor:pointer}& th{background-color:var(--quinary);text-align:center;font-size:var(--fs-lg);font-weight:var(--fw-normal);padding:var(--space-md) 0;cursor:pointer;margin:0}}}& tbody{&.pace-mode tr:hover td{background:color-mix(in srgb, var(--senary-light) 25%, transparent)}& tr{&:hover td{background:color-mix(in srgb, var(--quinary) 25%, transparent)}& td{border-top:var(--bw-medium) solid var(--gray-300);text-align:center;padding:var(--space-md) 0;font-size:var(--fs-lg);font-weight:var(--fw-normal);cursor:pointer;transition-duration:var(--transition-fast);&.pace-cell{color:var(--senary)}}}}}&>button{background:var(--error);color:var(--white);padding:var(--space-sm);border-radius:var(--br-md);cursor:pointer;transition-duration:var(--transition-slow);border:none;display:none;position:absolute;overflow:visible;&:hover{background:var(--error-hover)}&:hover:after{border-color:transparent var(--error-hover) transparent transparent}&:after{content:"";border-style:solid;border-width:8px;border-color:transparent var(--error) transparent transparent;transition-duration:var(--transition-slow);margin-top:-8px;position:absolute;top:50%;right:100%}& svg{fill:var(--white);width:var(--fs-xl);height:auto}}}section[aria-labelledby=scoring-tables]{outline:var(--bw-medium) solid var(--secondary);background:color-mix(in srgb, var(--secondary-light) 3.5%, var(--gray-50));line-height:var(--lh-normal);& h2{color:var(--secondary-dark);text-align:center;font-size:var(--fs-xl)}& a{width:fit-content;margin:var(--space-md) auto;padding:var(--space-sm) var(--space-xl);font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--secondary-dark);border-radius:var(--br-md);outline:var(--bw-medium) solid var(--secondary);transition:var(--transition-slow);z-index:1;text-decoration:none;display:block;position:relative;&:before{content:"";border-radius:var(--br-md);width:5%;height:100%;transition:var(--transition-slow);background:var(--secondary);z-index:-1;position:absolute;top:0;left:0}&:hover:before{width:100%}&:hover{color:var(--gray-950);animation:shake;& svg{transform:scale(1.1)}}}}dialog#deleteTable{padding:var(--space-3xl);border-radius:var(--br-lg);background:var(--white);max-width:var(--container-outside-sm);text-align:center;box-shadow:var(--shadow-lg);font-family:var(--font-primary);border:none;margin:auto;position:fixed;inset:0;&::backdrop{background:var(--shadow-lg);backdrop-filter:blur(2px)}& h2{font-size:var(--fs-xl);margin-bottom:var(--space-md);font-weight:var(--fw-semibold);letter-spacing:var(--ls-medium)}& p{font-size:var(--fs-base);color:var(--gray-800);line-height:var(--lh-normal)}& menu{margin-top:var(--space-xl);justify-content:space-between;gap:var(--space-md);display:flex;& button{padding:var(--space-md);border-radius:var(--br-sm);background:var(--gray-300);color:var(--gray-900);font-size:var(--fs-base);cursor:pointer;transition-duration:var(--transition-base);border:none;flex:1;&:hover{background:color-mix(in srgb, var(--gray-300) 92.5%, var(--black))}&:last-of-type{background:var(--error);color:var(--white);&:hover{background:var(--error-hover)}}}}}