:root {
	font-family: system-ui, sans-serif;
	overflow-wrap: break-word;
	line-height: 1.5;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	-webkit-tap-highlight-color: transparent;

	color: var(--color);
	background-color: var(--background);
	scrollbar-color: #8886 transparent;
	scrollbar-width: thin;
}

:root {
	color-scheme: light;
	--key-color: blue;
	--color: black;
	--background: #f6f7f8;
	--item-background: #fff;
	--item-separator: #eee;
	--gray-text: #666;
	--dl-box-shadow: 0 1px .5rem #0002;
}

@media not print {
	:root[data-theme=dark] {
		color-scheme: dark;
		--key-color: deepskyblue;
		--color: #eee;
		--background: #0d0d0d;
		--item-background: #1a1a1a;
		--item-separator: #060606;
		--gray-text: #aaa;
		--dl-box-shadow: 0 0 0 1px var(--item-separator);
	}
}

:root.uwu {
	--key-color: deeppink;
}

:root:not(.uwu) .uwu-only {
	display: none;
}

.accent {
	color: var(--key-color);
}

@media not print {
	:root.uwu[data-theme=dark] {
		--key-color: hotpink;
	}
}
:root:not([data-theme=light]) .light-only {
	display: none;
}

:root:not([data-theme=dark]) .dark-only {
	display: none;
}

body {
	margin: 0;
	min-block-size: 100dvb;
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

button {
	all: unset;
	outline: revert;
	cursor: pointer;
}

a {
	color: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
}

dl {
	margin: 0;
	padding: 0;
}

ol, ul {
	margin: 0;
	padding-inline-start: 2rem;
}

main {
	padding-inline: .9rem;
}

h1 {
	font-size: 1.4rem;
}

main > :is(h1, p) {
	margin-inline: .7rem;
}

main > section > h2 {
	margin-block-end: .3rem;
	font-size: 1.1rem;
	margin-inline: .7rem;
}

main > section > dl {
	/* border: 1px solid #8885; */
	border-radius: .5rem;
	/* padding: .3rem .7rem; */
	display: flex;
	flex-direction: column;
	gap: 1px;
	contain: paint;
	background-color: var(--item-separator);
	box-shadow: var(--dl-box-shadow);
}

main > section > dl > div {
	background-color: var(--item-background);
	padding: .2rem .7rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

main > section > dl > div > dt::after {
	content: " ";
	display: inline-block;
	white-space: pre-wrap;
}

dt {
	font-weight: 500;
	/* font-style: italic; */
}

main > section > dl > div > dt {
	/* text-decoration: underline; */
	/* opacity: .8; */
	color: var(--key-color);
	/* flex-shrink: 0; */
}

main > section > dl > div > dd {
	/* flex-basis: 18rem; */
}

dd {
	margin-inline-start: 0;
	flex-grow: 1;
}

dd	> :is(dl, ul, ol) {
	inline-size: 100%;
	/* padding-inline-start: 2em; */
	box-sizing: border-box;
}

dl > div > :is(dt, dd) {
	display: inline;
	min-inline-size: 0;
}

dd > ul {
	list-style: none;
	padding: 0;
	margin-block: .2rem;
	display: inline-flex;
	inline-size: fit-content;
	flex-wrap: wrap;
	gap: 6px;
}

dd > ul > li {
	padding: 0em .4em;
	/* background: #8881; */
	background: #ffffff08;
	border: 1px solid #6663;
	border-radius: .3em;
	box-shadow: 0 0 4px #11111122;
	overflow-wrap: anywhere;
}

li > dl > div {
	display: inline;
}

li > dl > div:not(:last-of-type) > dd::after {
	content: ",";
}


#accent-color::before {
	content: "";
	display: inline-block;
	--size: 1.3ex;
	block-size: var(--size);
	inline-size: var(--size);
	/* aspect-ratio: 1; */
	background: var(--color, transparent);
	border-radius: .1em;
	margin-inline: .1em .3em;
	border: 1px solid currentColor;
}

.keyboard-container {
	align-self: end;
	overflow-x: auto;
	scrollbar-width: thin;
	inline-size: 100%;
}

#keyboard-layout-map {
	container-type: inline-size;
	--keyboard-units-width: 60;
	--keyboard-units-height: 20;
	display: grid;
	grid-template: repeat(var(--keyboard-units-height), 1fr) / repeat(var(--keyboard-units-width), 1fr);
	inline-size: 100%;
	aspect-ratio: var(--keyboard-units-width) / var(--keyboard-units-height);
	box-sizing: border-box;
	padding: 2px;
	padding: min(2px, .5cqi);
	background-color: #8883;
	border-radius: 5px;
	margin-block: .3rem;
	list-style: none;
	gap: 0;
	min-inline-size: 25rem;
	max-inline-size: 40rem;
}

#keyboard-layout-map > .keyboard-key {
	box-sizing: border-box;
	display: grid;
	place-content: center;
	background-color: var(--item-background);
	/* background-color: #8882; */
	margin: 2px;
	margin: min(2px, .5cqi);
	border-radius: 3px;
	--_width: var(--width, 4);
	--_height: var(--height, 4);
	grid-column: calc(var(--x) + 1) / span var(--_width);
	grid-row: calc(var(--y) - 4) / span var(--_height);
	font-size: 8px;
	font-size: 2.2cqi;
	box-shadow: none;
	border: none;
}

main button {
	background-color: #8881;
	border: 1px solid #8883;
	padding: 0 .4em;
	border-radius: .3rem;
}

.compass-container {
	flex-grow: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	inline-size: fit-content;
	align-self: start;
}

.compass-container #compass {
	--degrees: 0;
	--needle-height: 8rem;
	--needle-width: 1rem;
	rotate: calc(var(--degrees) * 1deg);
	block-size: calc(var(--needle-height) + 2rem);
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #8882;
	background-clip: padding-box;
	border-radius: 50%;
	border: 5px solid #8885;
	margin-block: .5rem;
}

.compass-container #compass::before {
	content: "";
	border-block-end: calc(var(--needle-height) / 2) solid red;
	border-inline: calc(var(--needle-width) / 2) solid transparent;
}

.compass-container #compass::after {
	content: "";
	border-block-start: calc(var(--needle-height) / 2) solid CanvasText;
	border-inline: calc(var(--needle-width) / 2) solid transparent;
	opacity: .7;
}

.compass-container ~ button {
	margin-block-start: .3rem;
	margin-inline-start: .4rem;
}

.orientation-and-motion-container {
	flex-basis: 20rem;
}

.orientation-and-motion > div {
	--center-value: 0;
	--calculated-width: calc(((var(--value) - var(--center-value)) / var(--span) + 1) * 50%);
	position: relative;
	padding: 2px;
	isolation: isolate;
}

.orientation-and-motion > div::before {
	content: "";
	display: block;
	background-color: #88f8;
	border: 1px solid #88ff;
	box-sizing: border-box;
	position: absolute;
	z-index: -1;
	inset-block: 1px;
	inset-inline-start: 0;
	inline-size: var(--calculated-width);
	max-inline-size: 100%;
}

.orientation-and-motion > div.rotation {
	--span: 180;
}

.orientation-and-motion > div.rotation:is(#absolute-device-orientation-alpha, #device-orientation-alpha) {
	--center-value: 180;
}

.orientation-and-motion > div.acceleration {
	--span: 20;
}

footer {
	margin-inline: 1.2rem;
	text-align: end;
}

button#theme-switcher {
	color: var(--gray-text);
	margin-block: .5rem;
	font-size: .9rem;
}