--- /dev/null
+figure:before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+.parent > figure:after {
+ content: '+';
+ position: absolute;
+ right: 0;
+ color: #FFF;
+ width: 1em;
+ line-height: 1em;
+ background: #0008;
+ border-radius: 1em;
+}
+
+/* essential = blue */
+.level0 > figure:before {
+ box-shadow: inset 0 0 1em #0FF;
+}
+
+/* basic = cyan */
+.level1 > figure {
+ filter: sepia(.8) hue-rotate(70deg) saturate(2);
+}
+.level1 > figure:before {
+ box-shadow: inset 0 0 1em #0F0;
+}
+.level1 > figure figcaption {
+ background: #080C;
+}
+
+/* common = green */
+.level2 > figure {
+ filter: sepia(.9) hue-rotate(45deg) saturate(2);
+}
+.level2 > figure:before {
+ box-shadow: inset 0 0 1em #FF0;
+}
+.level2 > figure figcaption {
+ background: #480C;
+}
+
+/* distinct = yellow */
+.level3 > figure {
+ filter: sepia(.9) hue-rotate(15deg) saturate(2);
+}
+.level3 > figure:before {
+ box-shadow: inset 0 0 1em #FC0;
+}
+.level3 > figure figcaption {
+ background: #880C;
+}
+
+/* rare = orange */
+.level4 > figure {
+ filter: sepia(.9) hue-rotate(-10deg) saturate(2);
+}
+.level4 > figure:before {
+ box-shadow: inset 0 0 2em #F80;
+}
+.level4 > figure figcaption {
+ background: #840C;
+}
+
+.level5 > figure {
+ filter: sepia(.9) hue-rotate(-40deg) saturate(2);
+}
+.level5 > figure:before {
+ box-shadow: inset 0 0 3em #F00;
+}
+.level5 > figure figcaption {
+ background: #800C;
+}