JetStream.css - external/github.com/WebKit/JetStream - Git at Google

 /*
  * Copyright (C) 2018-2022 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
  *    documentation and/or other materials provided with the distribution.
  *
  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
  * THE POSSIBILITY OF SUCH DAMAGE.
 */

 :root {
     --color-primary: #34AADC;
     --color-secondary: #86D9FF;
     --text-color-inverse: white;
     --text-color-primary: black;
     --text-color-secondary: #555555;
     --text-color-tertiary: #444444;
     --text-color-subtle: #6c6c71;
     --text-color-very-subtle: #8E8E93;
     --heading-color: #2C98D1;
     --link-hover-color: #0086BF;
     --button-color-primary: rgb(52, 170, 220);
     --error-text-color: #d24a59;
     --benchmark-heading-color: rgb(183, 183, 183);
     --benchmark-error-text-color: #ff8686;
     --benchmark-done-result-color: #4A4A4A;
     --gap: 3rem;
     --width: 200px;
 }

 html,
 svg text {
     font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
     font-size: 62.5%;
     font-synthesis: none;
     height: 100vh;
 }

 body {
     display: flex;
     flex-direction: column;
     gap: var(--gap);
     margin: 0;
     font-size: 1.6rem;
     font-weight: 400;
     line-height: 1.4;
     background-repeat: no-repeat;
     background-position: center -5vw;
     background-size: 100vw;
     padding-bottom: 0px;
     background-image: url('clouds.svg');
     overflow-y: hidden;
     height: 100%;
 }

 table {
     border-spacing: 0;
 }

 body.nonDefaultParams {
     filter: hue-rotate(152deg);
 }

 .nonDefaultParams .summary {
     display: none;
 }

 #non-default-params {
     display: none;
     text-align: center;

     & h2 {
         text-align: center;
     }

     & p {
         text-align: center;
     }
 }

 .nonDefaultParams #non-default-params {
     display: block;
 }

 #non-standard-params-table {
     border-collapse: collapse;
     text-align: left;
     display: inline-block;
     margin-top: var(--gap);
 }

 #non-standard-params-table tr {
     padding: 2px;
 }

 #non-standard-params-table thead th {
     border-bottom: 1px solid var(--foreground);
 }

 #non-standard-params-table tbody td {
     font-weight: normal;
     text-align: left;
 }

 #non-standard-params-table thead th,
 #non-standard-params-table tbody td {
     padding: 0.1em 0.3em;
 }
 #non-standard-params-table tbody td:nth-child(2) {
     color: var(--highlight);
 }


 .overflow-scroll {
     overflow-y: auto;
 }

 .overflow-visible {
     overflow: visible;
 }


 ::selection {
     background-color: var(--color-primary);
     color: var(--text-color-inverse);
 }

 main {
     display: flex;
     flex-direction: column;
     gap: var(--gap);
     margin: 0 auto;
     padding: 0 var(--gap);
     max-width: 1180px;
     text-align: center;
     flex: 1;
     overflow: hidden;
 }

 main p {
     margin: 0;
 }

 img {
     -webkit-user-drag: none;
     user-select: none;
 }

 .logo {
     box-sizing: border-box;
     width: 100%;
     user-select: none;
     perspective: 600;
 }

 .logo .logo-image {
     display: block;
     box-sizing: border-box;
     background-repeat: no-repeat;
     background-position: center;
     background-image: url('JetStream3Logo.svg');
     color: transparent;
     animation: swingin 350ms ease-out forwards;
     will-change: transform, opacity;
     height: 75px;
 }

 #jetstreams {
     background-image: url('jetstreams.svg');
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
     padding: 2rem 0;
     margin: -2rem 0;
 }

 #jetstreams svg {
     width: 100%;
     max-height: 120px;
 }

 #magic {
     position: absolute;
     top: -900px;
     left: -900px;
     width: 300px;
     height: 300px;
     display: none;
 }

 .summary {
     text-align: center;
 }

 .summary:empty {
     display: none;
 }

 article,
 .summary {
     max-width: 70rem;
     margin: 0 auto 0 auto;
     opacity: 0;
     animation: fadein 0.5s ease-in-out forwards;
     animation-delay: 200ms;
 }

 article {
     display: flex;
     flex-direction: column;
     gap: var(--gap);
 }
 h1 {
     color: var(--text-color-primary);
     text-align: center;
     margin-bottom: 0;
 }


 h2,
 h3,
 h4,
 h5,
 h6 {
     color: var(--heading-color);
     text-align: left;
 }


 h4,
 h5,
 h6 {
     margin-bottom: 0;
 }

 p {
     text-align: left;
     color: var(--text-color-secondary);
 }

 h5,
 h6 {
     font-size: 1.6rem;
 }

 h6 {
     color: var(--text-color-tertiary);
 }

 dt {
     margin-top: 10px;
     font-weight: bold;
     text-align: left;
 }

 dd {
     text-align: left;
     padding: 10px 20px;
     margin: 0;
 }

 a:link,
 a:visited {
     color: var(--color-primary);
 }

 a:hover,
 a:active {
     color: var(--link-hover-color);
 }

 #status label,
 a.button {
     display: inline-block;
     font-weight: 500;
     text-decoration: none;
     font-size: 2rem;
     background-color: var(--button-color-primary);
     background-image: linear-gradient(180deg, rgba(134, 217, 255, 1) -80%, rgb(52, 170, 220) 100%);
     color: var(--text-color-inverse);
     border: 1px solid var(--button-color-primary);
     border-radius: 2px;
     padding: 0.3rem 0.3rem 0.5rem;
     text-align: center;
     width: var(--width);
     -webkit-touch-callout: none;
     user-select: none;
 }

 a.button {
     animation: fadein 500ms ease-in forwards, scaledown 500ms ease-in forwards;
     opacity: 0;
 }

 #status label,
 .button:hover {
     background-image: none;
 }

 #status.loading {
     position: absolute;
     top: 0;
     left: 0;
     margin: 48vh 0 0;
     width: 100%;
     line-height: 1.2;
     font-size: 4rem;
     font-style: italic;
     font-weight: 500;
     letter-spacing: -0.10rem;
     color: transparent;
     background-image: linear-gradient(132deg, #96E5FF 0%, #96E5FF 2%, #86D9FF 42%, #8BDAFF 84%, #96E5FF 98%, #96E5FF 100%);
     -webkit-background-clip: text;
     background-repeat: no-repeat;
     -webkit-touch-callout: none;
     user-select: none;
 }

 #status.error {
     max-width: 70rem;
     margin: 0 auto 1rem;
 }

 .error h2,
 .error p {
     color: var(--error-text-color);
     margin-bottom: 0;
     text-align: center;
     font-weight: 500;
 }

 .error h2 {
     font-size: 5rem;
     letter-spacing: -0.1rem;
     line-height: 1;
 }

 #result-summary:empty {
     display: none;
 }

 #result-summary {
     margin-top: 20px;
 }

 #result-summary label {
     color: var(--text-color-subtle);
 }

 #result-summary .score {
     font-weight: bold;
     font-size: 4rem;
     line-height: 1;
     color: var(--color-primary);
     font-weight: 500;
 }

 .benchmark .plot svg {
     display: inline-block;
     vertical-align: middle;
 }

 #result-summary .score .interval {
     display: block;
     font-weight: normal;
 }

 #results {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
     gap: var(--gap);
     margin: 0 calc(var(--gap) * -1) 0 calc(-var(--gap) * -1);
     animation: fadein 500ms ease-out forwards;
     opacity: 0;
     overflow-y: auto;
     flex: 1;
     padding-bottom: var(--gap);
     box-sizing: border-box;
 }

 .benchmark {
     position: relative;
     flex: 1;
     max-width: 20%;
     min-width: var(--width);
     text-align: left;
     color: var(--text-color-very-subtle);
     font-size: 1.6rem;
     scroll-margin-top: 20vh;
     scroll-margin-bottom: 20vh;
 }

 .benchmark .result.detail {
     display: none;
 }
 .details .benchmark .result.detail {
     display: inline-block;
 }

 .benchmark h4,
 .benchmark .result,
 .benchmark label,
 .benchmark .plot {
     color: transparent;
     background: linear-gradient(160deg, rgba(249, 249, 249, 1) 0%, rgba(238, 238, 238, 1) 100%);
     border-radius: 3px;
 }

 .benchmark h3 {
     color: var(--benchmark-heading-color);
 }

 .benchmark-running h4,
 .benchmark-running .result,
 .benchmark-running label,
 .benchmark-running .plot {
     color: var(--color-secondary);
     background-color: var(--color-secondary);
     background-image: none;
 }


 .benchmark-done h3,
 .benchmark-done h4,
 .benchmark-done .result,
 .benchmark-done label,
 .benchmark-done .plot {
     background-color: transparent;
     background-image: none;
     -webkit-touch-callout: revert;
     user-select: text;
 }

 .benchmark-error h4,
 .benchmark-error .result,
 .benchmark-error label,
 .benchmark-error .plot {
     color: var(--benchmark-error-text-color);
     background-color: var(--benchmark-error-text-color);
     background-image: none;
 }

 .benchmark-error h3 {
     color: var(--benchmark-error-text-color);
 }

 .benchmark h3 {
     font-weight: 400;
     font-size: 1.6rem;
     margin: 0;
 }

 .benchmark-running h3 {
     background-color: transparent;
     background-image: none;
     color: var(--color-primary);
 }

 .benchmark-done h3 {
     color: var(--text-color-subtle);
 }

 .benchmark a.info {
     display: inline-block;
     width: 1.5rem;
     height: 1.5rem;
     border-radius: 100%;
     background-color: var(--benchmark-heading-color);
     color: var(--text-color-inverse) !important;
     user-select: none;
     text-align: center;
     vertical-align: middle;
     font-style: italic;
     font-weight: bold;
     font-family: 'Times New Roman', Times, serif;
     line-height: 1.6rem;
     margin-top: -0.2rem;

 }

 .benchmark-running a.info {
     background-color: var(--color-primary);
 }

 .benchmark-done a.info {
     background-color: var(--text-color-subtle);
 }

 .benchmark h3 a,
 .benchmark h3 a:link,
 .benchmark h3 a:active,
 .benchmark h3 a:hover,
 .benchmark h3 a:visited {
     color: inherit;
     text-decoration: none;
 }

 .benchmark-done h3 a:hover {
     color: var(--color-primary);
     text-decoration: underline;
 }

 .benchmark h4 {
     margin: 0.3rem 0;
     line-height: 1;
     font-weight: 400;
     font-size: 2.4rem;
 }

 .benchmark-done h4 {
     color: var(--color-primary);
     background-color: none;
 }

 .benchmark p,
 .benchmark-done p {
     margin: 0;
 }

 .benchmark .result {
     display: inline-block;
     margin-right: 1.6rem;
     line-height: 1.3;
     font-size: 1.3rem;
     font-weight: bold;
 }

 #result-summary .benchmark {
     text-align: center;
     max-width: 100%;
     margin: 0;
     margin-left: 1.6rem;
 }

 .benchmark-done .result {
     color: var(--benchmark-done-result-color);
 }

 .benchmark label {
     display: block;
 }

 .benchmark-done label {
     color: var(--text-color-very-subtle);
     font-weight: 400;
 }

 dt:target {
     background-color: var(--color-secondary);
     color: var(--text-color-inverse);
     padding-left: 10px;
     border-radius: 5px;
 }

 .plot svg circle {
     fill: var(--color-primary);
     opacity: 0.8;
 }

 @keyframes fadein {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes scaledown {
     from {
         transform: scale(1.3, 1.3);
     }

     to {
         transform: scale(1, 1);
     }
 }

 @keyframes shine {
     0% {
         background-position: -1200px center;
     }

     100% {
         background-position: 100vw center;
     }
 }

 @keyframes swingin {
     from {
         opacity: 0;
         transform: rotateY(-85deg) translateZ(200px);
     }

     to {
         opacity: 1;
         transform: rotateY(0deg) translateZ(0px);
     }
 }

 @media (max-width: 415px) {
     body {
         background-position: center 4rem;
     }

     .logo .logo-image {
         height: 60px;
     }

     #jetstreams {
         background-size: 200%;
     }
 }
	/*
	* Copyright (C) 2018-2022 Apple Inc. All rights reserved.
	*
	* Redistribution and use in source and binary forms, with or without
	* modification, are permitted provided that the following conditions
	* are met:
	* 1. Redistributions of source code must retain the above copyright
	* notice, this list of conditions and the following disclaimer.
	* 2. Redistributions in binary form must reproduce the above copyright
	* notice, this list of conditions and the following disclaimer in the
	* documentation and/or other materials provided with the distribution.
	*
	* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
	* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
	* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
	* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
	* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
	* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
	* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
	* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
	* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
	* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
	* THE POSSIBILITY OF SUCH DAMAGE.
	*/

	:root {
	--color-primary: #34AADC;
	--color-secondary: #86D9FF;
	--text-color-inverse: white;
	--text-color-primary: black;
	--text-color-secondary: #555555;
	--text-color-tertiary: #444444;
	--text-color-subtle: #6c6c71;
	--text-color-very-subtle: #8E8E93;
	--heading-color: #2C98D1;
	--link-hover-color: #0086BF;
	--button-color-primary: rgb(52, 170, 220);
	--error-text-color: #d24a59;
	--benchmark-heading-color: rgb(183, 183, 183);
	--benchmark-error-text-color: #ff8686;
	--benchmark-done-result-color: #4A4A4A;
	--gap: 3rem;
	--width: 200px;
	}

	html,
	svg text {
	font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
	font-size: 62.5%;
	font-synthesis: none;
	height: 100vh;
	}

	body {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	margin: 0;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.4;
	background-repeat: no-repeat;
	background-position: center -5vw;
	background-size: 100vw;
	padding-bottom: 0px;
	background-image: url('clouds.svg');
	overflow-y: hidden;
	height: 100%;
	}

	table {
	border-spacing: 0;
	}

	body.nonDefaultParams {
	filter: hue-rotate(152deg);
	}

	.nonDefaultParams .summary {
	display: none;
	}

	#non-default-params {
	display: none;
	text-align: center;

	& h2 {
	text-align: center;
	}

	& p {
	text-align: center;
	}
	}

	.nonDefaultParams #non-default-params {
	display: block;
	}

	#non-standard-params-table {
	border-collapse: collapse;
	text-align: left;
	display: inline-block;
	margin-top: var(--gap);
	}

	#non-standard-params-table tr {
	padding: 2px;
	}

	#non-standard-params-table thead th {
	border-bottom: 1px solid var(--foreground);
	}

	#non-standard-params-table tbody td {
	font-weight: normal;
	text-align: left;
	}

	#non-standard-params-table thead th,
	#non-standard-params-table tbody td {
	padding: 0.1em 0.3em;
	}
	#non-standard-params-table tbody td:nth-child(2) {
	color: var(--highlight);
	}


	.overflow-scroll {
	overflow-y: auto;
	}

	.overflow-visible {
	overflow: visible;
	}


	::selection {
	background-color: var(--color-primary);
	color: var(--text-color-inverse);
	}

	main {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	margin: 0 auto;
	padding: 0 var(--gap);
	max-width: 1180px;
	text-align: center;
	flex: 1;
	overflow: hidden;
	}

	main p {
	margin: 0;
	}

	img {
	-webkit-user-drag: none;
	user-select: none;
	}

	.logo {
	box-sizing: border-box;
	width: 100%;
	user-select: none;
	perspective: 600;
	}

	.logo .logo-image {
	display: block;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('JetStream3Logo.svg');
	color: transparent;
	animation: swingin 350ms ease-out forwards;
	will-change: transform, opacity;
	height: 75px;
	}

	#jetstreams {
	background-image: url('jetstreams.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	padding: 2rem 0;
	margin: -2rem 0;
	}

	#jetstreams svg {
	width: 100%;
	max-height: 120px;
	}

	#magic {
	position: absolute;
	top: -900px;
	left: -900px;
	width: 300px;
	height: 300px;
	display: none;
	}

	.summary {
	text-align: center;
	}

	.summary:empty {
	display: none;
	}

	article,
	.summary {
	max-width: 70rem;
	margin: 0 auto 0 auto;
	opacity: 0;
	animation: fadein 0.5s ease-in-out forwards;
	animation-delay: 200ms;
	}

	article {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	}
	h1 {
	color: var(--text-color-primary);
	text-align: center;
	margin-bottom: 0;
	}


	h2,
	h3,
	h4,
	h5,
	h6 {
	color: var(--heading-color);
	text-align: left;
	}


	h4,
	h5,
	h6 {
	margin-bottom: 0;
	}

	p {
	text-align: left;
	color: var(--text-color-secondary);
	}

	h5,
	h6 {
	font-size: 1.6rem;
	}

	h6 {
	color: var(--text-color-tertiary);
	}

	dt {
	margin-top: 10px;
	font-weight: bold;
	text-align: left;
	}

	dd {
	text-align: left;
	padding: 10px 20px;
	margin: 0;
	}

	a:link,
	a:visited {
	color: var(--color-primary);
	}

	a:hover,
	a:active {
	color: var(--link-hover-color);
	}

	#status label,
	a.button {
	display: inline-block;
	font-weight: 500;
	text-decoration: none;
	font-size: 2rem;
	background-color: var(--button-color-primary);
	background-image: linear-gradient(180deg, rgba(134, 217, 255, 1) -80%, rgb(52, 170, 220) 100%);
	color: var(--text-color-inverse);
	border: 1px solid var(--button-color-primary);
	border-radius: 2px;
	padding: 0.3rem 0.3rem 0.5rem;
	text-align: center;
	width: var(--width);
	-webkit-touch-callout: none;
	user-select: none;
	}

	a.button {
	animation: fadein 500ms ease-in forwards, scaledown 500ms ease-in forwards;
	opacity: 0;
	}

	#status label,
	.button:hover {
	background-image: none;
	}

	#status.loading {
	position: absolute;
	top: 0;
	left: 0;
	margin: 48vh 0 0;
	width: 100%;
	line-height: 1.2;
	font-size: 4rem;
	font-style: italic;
	font-weight: 500;
	letter-spacing: -0.10rem;
	color: transparent;
	background-image: linear-gradient(132deg, #96E5FF 0%, #96E5FF 2%, #86D9FF 42%, #8BDAFF 84%, #96E5FF 98%, #96E5FF 100%);
	-webkit-background-clip: text;
	background-repeat: no-repeat;
	-webkit-touch-callout: none;
	user-select: none;
	}

	#status.error {
	max-width: 70rem;
	margin: 0 auto 1rem;
	}

	.error h2,
	.error p {
	color: var(--error-text-color);
	margin-bottom: 0;
	text-align: center;
	font-weight: 500;
	}

	.error h2 {
	font-size: 5rem;
	letter-spacing: -0.1rem;
	line-height: 1;
	}

	#result-summary:empty {
	display: none;
	}

	#result-summary {
	margin-top: 20px;
	}

	#result-summary label {
	color: var(--text-color-subtle);
	}

	#result-summary .score {
	font-weight: bold;
	font-size: 4rem;
	line-height: 1;
	color: var(--color-primary);
	font-weight: 500;
	}

	.benchmark .plot svg {
	display: inline-block;
	vertical-align: middle;
	}

	#result-summary .score .interval {
	display: block;
	font-weight: normal;
	}

	#results {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: var(--gap);
	margin: 0 calc(var(--gap) * -1) 0 calc(-var(--gap) * -1);
	animation: fadein 500ms ease-out forwards;
	opacity: 0;
	overflow-y: auto;
	flex: 1;
	padding-bottom: var(--gap);
	box-sizing: border-box;
	}

	.benchmark {
	position: relative;
	flex: 1;
	max-width: 20%;
	min-width: var(--width);
	text-align: left;
	color: var(--text-color-very-subtle);
	font-size: 1.6rem;
	scroll-margin-top: 20vh;
	scroll-margin-bottom: 20vh;
	}

	.benchmark .result.detail {
	display: none;
	}
	.details .benchmark .result.detail {
	display: inline-block;
	}

	.benchmark h4,
	.benchmark .result,
	.benchmark label,
	.benchmark .plot {
	color: transparent;
	background: linear-gradient(160deg, rgba(249, 249, 249, 1) 0%, rgba(238, 238, 238, 1) 100%);
	border-radius: 3px;
	}

	.benchmark h3 {
	color: var(--benchmark-heading-color);
	}

	.benchmark-running h4,
	.benchmark-running .result,
	.benchmark-running label,
	.benchmark-running .plot {
	color: var(--color-secondary);
	background-color: var(--color-secondary);
	background-image: none;
	}


	.benchmark-done h3,
	.benchmark-done h4,
	.benchmark-done .result,
	.benchmark-done label,
	.benchmark-done .plot {
	background-color: transparent;
	background-image: none;
	-webkit-touch-callout: revert;
	user-select: text;
	}

	.benchmark-error h4,
	.benchmark-error .result,
	.benchmark-error label,
	.benchmark-error .plot {
	color: var(--benchmark-error-text-color);
	background-color: var(--benchmark-error-text-color);
	background-image: none;
	}

	.benchmark-error h3 {
	color: var(--benchmark-error-text-color);
	}

	.benchmark h3 {
	font-weight: 400;
	font-size: 1.6rem;
	margin: 0;
	}

	.benchmark-running h3 {
	background-color: transparent;
	background-image: none;
	color: var(--color-primary);
	}

	.benchmark-done h3 {
	color: var(--text-color-subtle);
	}

	.benchmark a.info {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 100%;
	background-color: var(--benchmark-heading-color);
	color: var(--text-color-inverse) !important;
	user-select: none;
	text-align: center;
	vertical-align: middle;
	font-style: italic;
	font-weight: bold;
	font-family: 'Times New Roman', Times, serif;
	line-height: 1.6rem;
	margin-top: -0.2rem;

	}

	.benchmark-running a.info {
	background-color: var(--color-primary);
	}

	.benchmark-done a.info {
	background-color: var(--text-color-subtle);
	}

	.benchmark h3 a,
	.benchmark h3 a:link,
	.benchmark h3 a:active,
	.benchmark h3 a:hover,
	.benchmark h3 a:visited {
	color: inherit;
	text-decoration: none;
	}

	.benchmark-done h3 a:hover {
	color: var(--color-primary);
	text-decoration: underline;
	}

	.benchmark h4 {
	margin: 0.3rem 0;
	line-height: 1;
	font-weight: 400;
	font-size: 2.4rem;
	}

	.benchmark-done h4 {
	color: var(--color-primary);
	background-color: none;
	}

	.benchmark p,
	.benchmark-done p {
	margin: 0;
	}

	.benchmark .result {
	display: inline-block;
	margin-right: 1.6rem;
	line-height: 1.3;
	font-size: 1.3rem;
	font-weight: bold;
	}

	#result-summary .benchmark {
	text-align: center;
	max-width: 100%;
	margin: 0;
	margin-left: 1.6rem;
	}

	.benchmark-done .result {
	color: var(--benchmark-done-result-color);
	}

	.benchmark label {
	display: block;
	}

	.benchmark-done label {
	color: var(--text-color-very-subtle);
	font-weight: 400;
	}

	dt:target {
	background-color: var(--color-secondary);
	color: var(--text-color-inverse);
	padding-left: 10px;
	border-radius: 5px;
	}

	.plot svg circle {
	fill: var(--color-primary);
	opacity: 0.8;
	}

	@keyframes fadein {
	from {
	opacity: 0;
	}

	to {
	opacity: 1;
	}
	}

	@keyframes scaledown {
	from {
	transform: scale(1.3, 1.3);
	}

	to {
	transform: scale(1, 1);
	}
	}

	@keyframes shine {
	0% {
	background-position: -1200px center;
	}

	100% {
	background-position: 100vw center;
	}
	}

	@keyframes swingin {
	from {
	opacity: 0;
	transform: rotateY(-85deg) translateZ(200px);
	}

	to {
	opacity: 1;
	transform: rotateY(0deg) translateZ(0px);
	}
	}

	@media (max-width: 415px) {
	body {
	background-position: center 4rem;
	}

	.logo .logo-image {
	height: 60px;
	}

	#jetstreams {
	background-size: 200%;
	}
	}