:root {
	--primary-hue-saturation: 24 20%;
	--secondary-hue-saturation: 200 10%;
	--tertiary-hue-saturation: 0 0%;

	--lightness-0: 0%;
	--lightness-5: 5%;
	--lightness-80: 80%;
	--lightness-95: 95%;
	--lightness-98: 98%;

	--primary-shadow-lightness: 100%;
	--secondary-shadow-lightness: 0%;
	--primary-border-lightness: var(--secondary-shadow-lightness);

	--primary-background-color: hsl(var(--primary-hue-saturation) var(--lightness-95));
	--primary-foreground-color: hsl(var(--primary-hue-saturation) var(--lightness-5));
	--secondary-background-color: hsl(var(--secondary-hue-saturation) 20%);
	--secondary-foreground-color: hsl(var(--tertiary-hue-saturation) 100%);
	--tertiary-background-color: transparent;
	--tertiary-foreground-color: hsl(var(--secondary-hue-saturation) 20%);
	--primary-shadow-color: hsl(var(--tertiary-hue-saturation) var(--primary-shadow-lightness));
	--secondary-shadow-color: hsl(var(--tertiary-hue-saturation) var(--secondary-shadow-lightness) / .5);
	--primary-border-color: hsl(var(--tertiary-hue-saturation) var(--primary-border-lightness) / .25);
	--secondary-border-color: var(--secondary-background-color);
	--shade-color: hsl(var(--tertiary-hue-saturation) 0% / .3);

	--spec-link-background-color: var(--secondary-background-color);
	--spec-link-foreground-color: var(--secondary-foreground-color);
	--highlight-background-color: hsl(336 100% 50%);
	--highlight-foreground-color: hsl(0 0% 100%);
	--prefix-background-color: var(--shade-color);
	--prefix-foreground-color: var(--spec-link-foreground-color);
	--progress-color: var(--shade-color);

	--test-result-darkening: 0%;

	--pass-color: hsl(93 100% 30%);
	--almost-pass-color: hsl(80 100% 40%);
	--slightly-buggy-color: hsl(60 100% 37%);
	--buggy-color: hsl(34 100% 47%);
	--very-buggy-color: hsl(17 100% 47%);
	--fail-color: hsl(9 100% 47%);
	--epic-fail-color: hsl(0 100% 37%);

	--aside-border-color: hsl(var(--tertiary-hue-saturation) var(--lightness-80) / .8);
	--aside-background-color: hsl(var(--tertiary-hue-saturation) var(--lightness-98) / .6);
	--aside-foreground-color: hsl(var(--tertiary-hue-saturation)  var(--lightness-0));
}

@media (prefers-color-scheme: dark) {
	:root {
		--lightness-0: 100%;
		--lightness-5: 95%;
		--lightness-80: 20%;
		--lightness-95: 5%;
		--lightness-98: 2%;

		--primary-shadow-lightness: 0%;
		--secondary-shadow-lightness: 25%;

		--tertiary-foreground-color: hsl(var(--secondary-hue-saturation) 90%);
		--primary-shadow-color: hsl(var(--secondary-hue-saturation) 25% / .25);

		--pass-color: hsl(93 100% 25%);
		--almost-pass-color: hsl(80 100% 35%);
		--slightly-buggy-color: hsl(60 100% 32%);
		--buggy-color: hsl(34 100% 42%);
		--very-buggy-color: hsl(17 100% 42%);
		--fail-color: hsl(9 100% 42%);
		--epic-fail-color: hsl(0 100% 32%);

		color-scheme: dark;
	}
}

:focus {
	outline: .1em dotted var(--highlight-background-color);
	outline-offset: .1em;
}

body {
	max-width: 60em;
	padding: 1em;
	margin: auto;
	background: url(https://dabblet.com/img/noise.png) var(--primary-background-color);
	color: var(--primary-foreground-color);
	font: 100%/1.5 sans-serif;
	text-shadow: 0 1px var(--primary-shadow-color);
}

a {
	background-color: var(--tertiary-background-color);
	color: var(--tertiary-foreground-color);
	font-weight: bold;
	text-decoration: none;
}

h1,
h2 {
	margin: 1em 0 .5em;
	font-weight: normal;
	line-height: 1;
}

#content > section section section h1 {
	display: flex;
	align-items: center;
	font-size: 180%;
	gap: 0.5em;
}

#content > section section section section h1 {
	background-color: var(--tertiary-background-color);
	color: var(--tertiary-foreground-color);
	font-size: 120%;
	font-weight: bold;
	text-transform: capitalize;
}

h1 > .score {
	margin-left: auto;
	font-weight: bold;
}

.spec-links {
	display: flex;
}

.spec-link {
	display: flex;
	padding: .3em .4em;
	margin: -.5em 0 -.5em .3em;
	font-family: sans-serif;
	font-size: 0.9rem;
	background-color: var(--spec-link-background-color);
	color: var(--spec-link-foreground-color);
	border-radius: .3em;
	vertical-align: middle;
	text-shadow: 0 .1em .1em var(--secondary-shadow-color);
}

.spec-link:hover,
.spec-link:focus {
	outline: none;
	background-color: var(--highlight-background-color);
	color: var(--highlight-foreground-color);
}

.w3c-link::before,
.mdn-link::before,
.whatwg-link::before {
	content:'';
	display: inline-block;
	height: 16px;
	width: 16px;
	background: url("data:image/svg+xml,<?xml version='1.0' encoding='UTF-8'?> <svg width='16' height='16' version='1.1' viewBox='0 0 4.2333 4.2333' xmlns='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23'> <path d='m0.035363 0.61275h0.4124l0.54126 1.8375 0.34374-1.3614-0.15643-0.47615h0.44465l0.50434 1.8157 0.55325-1.8157 1.4424 0.010055 0.0057528 0.18633-0.56683 0.97156c0.16442 0.026204 0.62609 0.24816 0.61673 0.92355-0.0093492 0.6754-0.47494 0.96237-0.78322 0.95736-0.30827-0.0050015-0.58395-0.15432-0.74365-0.61556l0.29081-0.13409c0.17859 0.3634 0.24065 0.36155 0.44314 0.37218 0.20249 0.010631 0.3613-0.15592 0.35882-0.6854-0.0024723-0.52948-0.40786-0.52174-0.67275-0.49464l-0.01716-0.17759 0.53506-0.92525-0.62349 0.0071148-0.8335 2.6879s-0.58082-1.9604-0.58082-1.9106c0 0.049773-0.57178 1.9056-0.57178 1.9056z' fill='%23fefefe' fill-rule='evenodd'/> </svg>") 0 0 / 16px 16px;
	vertical-align: -3px;
	margin-right: 3px;
	opacity: .5;
}

.mdn-link::before {
	background-image: url("data:image/svg+xml,<?xml version='1.0' encoding='UTF-8'?> <svg width='16' height='16' version='1.1' viewBox='0 0 4.2333 4.2333' xmlns='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23'> <path d='m2.4076 0.6707c-0.51041-0.29724-1.0833-0.14856-1.4449 0.16704l-0.9605 0.9438 0.65147-0.016704-0.3675 0.42596 0.66817 0.016704-0.41761 0.44267 0.56795 0.0083521-0.15034 0.47607c0.41841 0.41283 0.90754 0.64883 1.4199 0.82686 0.1437-0.54959-0.046954-1.3818 0.45937-1.4366 0.33349-0.036107 0.55014 0.12707 0.7517 0.091874s0.25892-0.16704 0.25892-0.16704c0.20521 0.05062 0.25615-0.15587 0.33409-0.31738 0.017978-0.12377 0.0011606-0.21275-0.025056-0.29233 0.0085525-0.16476 0.02152-0.33151-0.22011-0.38909-0.16275-0.063531-0.30787-0.13398-0.51488-0.21226-0.11763-0.036416-0.22295-0.13562-0.28397-0.35914-0.036707-0.13446-0.14207-0.20802-0.29367-0.21808-0.089008-0.005906-0.28178 0.097323-0.43297 0.009278z' fill='%23fefefe' fill-rule='evenodd'/> </svg>");
}

.whatwg-link::before {
	background-image: url("data:image/svg+xml,<?xml version='1.0' encoding='UTF-8'?> <svg xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' version='1.1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'> <circle cx='50' cy='50' r='45' fill='none' stroke='%23fff' stroke-width='10'/> <path d='m38 38c0-12 24-15 23-2 0 9-16 13-16 23v7h10v-4c0-9 17-12 17-27-2-22-45-22-45 3zm7 32h10v10h-10' fill='%23fff'/> <script/> </svg>");
}

details summary > .spec-link {
	display: none;
	vertical-align: inherit;
}

details summary:hover > .spec-link,
details summary:focus-within > .spec-link {
	display: inline-block;
}

details summary > .spec-link::before {
	height: 18px;
	width: 18px;
	background-size: 18px 18px;
	vertical-align: -4px;
}

body > h1 {
	position: fixed;
	left: 0;
	top: 0;
	padding: .5em 1em;
	background: var(--secondary-background-color);
	box-shadow: -2px 2px 10px var(--secondary-shadow-color);
	color: var(--secondary-foreground-color);
	z-index: 1;
	font-size: 150%;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: 0 .1em .1em var(--secondary-shadow-color);

	transform:  rotate(-90deg) translateX(-100%);
	transform-origin: top left;
}

#mark {
	position: fixed;
	left: 10px;
	top: 235px;
	z-index: 2;
}

#mark img {
	display: block;
	width: 50px;
	border-radius: 50%;
	box-shadow: 2px 2px 10px var(--secondary-shadow-color);

	transform: rotate(-15deg);
}

#content {
	display: flex;
	gap: 2em;
}

#tests {
	flex: 2;
}

#tests #hgroup {
	text-align: center;
}

#tests > #hgroup > h1 {
	font-size: 250%;
}

#tests h1 > strong {
	display: block;
	margin-top: .1em;
	font-size: 500%;
	line-height: .7;
}

#tests h2 {
	font-size: 80%;
}

details {
	margin: .3em 0;
	font: 100% Monaco, Consolas, monospace;
}

details summary,
details li[class] {
	padding: .5em;
	background: gray;
	color: white;
	border-radius: .3em;
	text-shadow: 0 -.05em .1em var(--secondary-shadow-color);
	position: relative;
}

details summary {
	list-style: none;
	cursor: pointer;
	padding-top: .6em;
	padding-right: 2em;
	background: linear-gradient(var(--progress-color), var(--progress-color)) no-repeat 0 0 / calc(var(--progress) * 1%) .2em;
}

details summary::-webkit-details-marker {
	display: none;
}

details ul {
	margin: 0;
	padding: 0 0 0 2em;
}

details li[class] {
	list-style: none;
	margin: .3em 0;
	font-size: 90%;
	white-space: pre;
	white-space: break-spaces;
}

details li[class] small {
	display: block;
	opacity: .8;
}

details summary.pass,
details li.pass,
#specsTested li.pass::before {
	background-color: var(--pass-color);
}

details summary.almost-pass,
details li.almost-pass,
#specsTested li.almost-pass::before {
	background-color: var(--almost-pass-color);
}

details summary.slightly-buggy,
details li.slightly-buggy,
#specsTested li.slightly-buggy::before {
	background-color: var(--slightly-buggy-color);
}

details summary.buggy,
details li.buggy,
#specsTested li.buggy::before {
	background-color: var(--buggy-color);
}

details summary.very-buggy,
details li.very-buggy,
#specsTested li.very-buggy::before {
	background-color: var(--very-buggy-color);
}

details summary.fail,
details li.fail,
#specsTested li.fail::before {
	background-color: var(--fail-color);
}

details summary.epic-fail,
details li.epic-fail,
#specsTested li.epic-fail::before {
	background-color: var(--epic-fail-color);
}

details summary::before {
	content: '▶';
	display: inline-block;
	margin-right: .5em;
	font-size: 60%;
	opacity: .5;
}

details[open] summary::before {
	content: '▼';
}

.prefix {
	display: inline-block;
	padding: .3em .4em;
	margin: -.5em 0 -.5em .3em;
	font-family: sans-serif;
	font-size: 0.7rem;
	background: var(--prefix-background-color);
	color: var(--prefix-foreground-color);
	border-radius: .3em;
	vertical-align: middle;
	text-shadow: 0 .1em .1em var(--secondary-shadow-color);
}

/* Emoticons */

details summary::after,
details li[class]::after,
#specsTested li::after {
	opacity: 0.75;
	position: absolute;
	top: 0;
}

details summary::after,
details li[class]::after {
	letter-spacing: -2px;
	padding-top: .6em;
	right: 10px;
}

#specsTested li::after {
	font: 83.3%/29px Monaco, Consolas, monospace;
	right: 0;
}

.almost-pass::after {
	content: ':)';
}

.buggy::after {
	content: ':(';
}

.epic-fail::after {
	content: '›:(';
}

.fail::after {
	content: ':′(';
}

.pass::after {
	content: ':D';
}

.slightly-buggy::after {
	content: ':|';
}

.very-buggy::after {
	content: ':o';
}

/* End emoticons */

aside {
	flex: 1;
	font-size: 85%;
	align-self: flex-end;
	position: sticky;
	bottom: 0;
}

.caution p {
	padding: 1em;
	background: var(--secondary-background-color);
	color: var(--secondary-foreground-color);
	text-shadow: 0 -.1em .2em var(--secondary-shadow-color);
}

.caution p a {
	color: var(--secondary-foreground-color);
}

aside h1 {
	font-size: 150%;
}

aside ul {
	max-height: calc(100vh - 18em);
	overflow: auto;
	margin: .5em 0;
	padding: 0;
}

aside li {
	list-style: none;
	padding: .3em 0;
	border-bottom: 2px dotted var(--primary-border-color);
}

aside li:first-child {
	border-top: none;
}

aside li:last-child {
	border-bottom: none;
}

#specsTested li {
	position: relative;
}

#specsTested li::before {
	content: '';
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	margin-right: .5em;
	vertical-align: -.2em;
	border-radius: 50%;
	box-shadow: 0 2px var(--primary-shadow-color);
}

footer {
	word-spacing: -1px;
}

footer > p {
	padding: 1em 0;
	border-top: 1px solid var(--secondary-border-color);
	text-align: center;
}

/* Carbon Ads */
#carbonads {
	display: block;
	overflow: hidden;
	padding: 1em;
	border: solid 1px var(--aside-border-color);
	background-color: var(--aside-background-color);
	font-size: 12px;
	line-height: 1.5;
}

#carbonads a {
	font-weight: 400;
	color: var(--aside-foreground-color);
	text-shadow: none;
}

#carbonads span {
	position: relative;
	display: block;
	overflow: hidden;
}

.carbon-img {
	float: left;
	margin-right: 1em;
}

.carbon-img img {
	display: block;
}

.carbon-text {
	display: block;
	float: left;
	max-width: calc(100% - 130px - 1em);
	text-align: left;
}

.carbon-poweredby {
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	font-size: 10px;
}