body {
	background: #000;
	color: #CCC;
}
a, a:visited {
	color: #BBB;
}
.l:hover a:active, .l:hover a:hover, /* prevent override */
a:active, a:hover {
	color: #44E;
	text-decoration: none;
}

dl.legend dt,
.keys td {
	border-color: #888;
}
dl.legend-options dt {background: #333}

/* syntax highlighting */

.sy-comment    { color: #888 }
.sy-constant   { color: #8AC }
.sy-type,
.sy-identifier { color: #C9B }
.sy-special    { color: #A9C }
.sy-error      { font-weight: bold; background-color: #800; color: #EEE }
.sy-todo       { background-color: #880 }

.glyphs b      { color: #C44 }

/* character properties */

th, td {
	border-color: #555;
	background: #222;
}
.mapped tbody, .mapped colgroup,
.dimap tbody, .dimap colgroup {
	border-color: #665;
}

.glyphs small.digraph {
	background: #444;
	color: #AAA;
	opacity: 0.5;
}
.glyphs small.value {
	background: #633;
	color: #AAA;
	opacity: 0.4;
}

.X  {background: #000} /* unidentified */
.X > span {background: #898; background: rgba(255, 255, 255, .25)} /* invisible contents */

/* letter scripts */
.Armenian,
.Greek    {background: #532}
.Cyrillic {background: #420}
.Latin    {background: #440}
.Aramaic,
.Hebrew   {background: #452}
.Arabic   {background: #343}
.African  {background: #434}
.Brahmic  {background: #411} /* same as number */
.Khmer    {background: #410}
.Hangul,
.Syllabic {background: #230}
.Katakana {background: #240}
.Hiragana {background: #241}
.Bopomofo {background: #041}
.Han      {background: #143}
.Alpha    {background: #020} /* other scripts */

/* other categories */
.Nd, .Nl, .No         {background: #411} /* number */
.Sc                   {background: #401} /* currency */
.Sm                   {background: #303} /* math */
.So                   {background: #204} /* symbol */
.Pd, .Po, .Pc         {background: #124} /* punctuation */
.Ps, .Pe, .Pi, .Pf    {background: #024} /* quote */
.Lm, .Sk              {background: #044} /* spacing modifier */
.Mn                   {background: #022} /* modifier */
.Cc, .Cf {color: #AAA; background: #556} /* control */
.Zs                   {background: #142} /* space */
.Co, .Xi.Co           {background: #322} /* private */
.Xi, .Cs              {background: #444} /* invalid */
.Xd                   {color: #844} /* deprecated */
.Xr                   {color: #888} /* reserved (digraph reverse or proposal) */
.dimap .Xr            {background: #333} /* reversed digraph */
.ccmap .Xr {opacity:.4}

/* implementation-based alternatives */
.l1 {background: #411} /* bmp */
.l2 {background: #321} /* proposed digraph */
.l3 {background: #330} /* rfc-1345 digraph */
.l4 {background: #030} /* ascii */
.l5 {background: #00331D} /* ascii */
.l0 {background: #222}
.ex {     color: #777} /* disfavoured */
.u-invalid {background: #333} /* impossible */

/* foreground representation */
#digraphs .u-l4 {color: #4A4} /* partial */
#digraphs .u-l5 {color: #6C4} /* experimental */
#digraphs .u-l2 {color: #A44; color: rgba(191, 127, 127, .8)} /* unofficial */
#digraphs .u-l1 {color: #D00; color: rgba(255, 63, 63, .8)} /* missing */

.p4::after {color: #F44}
.p3::after {color: #E66}
.p2::after {color: #C88}
.p1::after,
.p0::after {color: #CCC}

/* general colorization */

.c-sa,
.g1 {background: #044}
.c-na,
.g2 {background: #040}
.g3 {background: #340}
.c-af,
.g4 {background: #440}
.c-eu,
.g5 {background: #530}
.g6 {background: #520}
.c-as,
.g7 {background: #500}
.c-an,
.g8 {background: #503}
.c-oc,
.g9 {background: #205}
.no {background: #222}

.X:hover,
.l:hover a, .l:hover a:visited,
.g9 a:hover, .g9[onclick]:hover,
.g8 a:hover, .g8[onclick]:hover,
.g7 a:hover, .g7[onclick]:hover,
.g6 a:hover, .g6[onclick]:hover,
.g5 a:hover, .g5[onclick]:hover,
.g4 a:hover, .g4[onclick]:hover,
.g3 a:hover, .g3[onclick]:hover,
.g2 a:hover, .g2[onclick]:hover {
	color: #000; /* on default (light) background hover */
}
.legend .ex:hover {background: #666}
.X:hover small {color: #FFF}

/* images */

figcaption {
	color: #FFF;
	background: rgba(0, 0, 0, .5);
}
.gallery figure:hover ~ ul figcaption {
	/* mark all children */
	color: #000;
	background: rgba(255, 255, 255, .5);
}

/* keyboard */

@media (max-width: 79em) {
	.keys td b,
	.keys .meta td b,
	.keys .ctrl td b,
	.keys .lead td b {
		color: #000;
	}
}