@font-face {
	font-family: notdef;
	font-display: block;
	src: url(https://davidje13.com/assets/AND-Regular.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans Living';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSansLiving-Regular.ttf)
		format('truetype');
}

@font-face {
	font-family: 'Noto Sans Historical';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSansHistorical-Regular.ttf)
		format('truetype');
}

@font-face {
	font-family: 'Noto Sans SignWriting';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSansSignWriting-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-0329, U+1D00-1EFF, U+2000-2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF,
		U+FFFD, U+1D800-1DAAF;
}

@font-face {
	font-family: 'Noto Sans Duployan';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSansDuployan-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-0329, U+1D00-1EFF, U+2000-2215, U+25CC, U+2C60-2C7F, U+2E3C,
		U+A720-A7FF, U+FEFF, U+FFFD, U+1BC00-1BCA3;
}

@font-face {
	font-family: 'Noto Serif Makasar';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSerifMakasar-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-0329, U+1D00-1EFF, U+2000-2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF,
		U+FFFD, U+11EE0-11EF8;
}

@font-face {
	font-family: 'Noto Serif Todhri';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSerifTodhri-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-035E, U+1D00-1EFF, U+2000-2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF,
		U+FFFD, U+105C0-105F3;
}

@font-face {
	font-family: 'Noto Serif Old Uyghur';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSerifOldUyghur-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-0329, U+0640, U+1D00-1EFF, U+2000-2215, U+2C60-2C7F, U+A720-A7FF,
		U+FEFF, U+FFFD, U+10AF2, U+10F70-10F89;
}

@font-face {
	font-family: 'Noto Serif Dogra';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSerifDogra-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-0329, U+093D-096F, U+1D00-1EFF, U+2000-2215, U+25CC, U+2C60-2C7F,
		U+A720-A839, U+FEFF, U+FFFD, U+11800-1183B;
}

@font-face {
	font-family: 'Noto Serif Dives Akuru';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSerifDivesAkuru-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-0329, U+1D00-1EFF, U+2000-2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF,
		U+FFFD, U+11900-11959;
}

@font-face {
	font-family: 'Noto Serif Tangut';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSerifTangut-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-0329, U+1D00-1EFF, U+2000-2215, U+2C60-2C7F, U+2FF0-2FFF, U+31EF,
		U+A720-A7FF, U+FEFF, U+FFFD, U+16FE0-18AFF, U+18D00-18D08;
}

@font-face {
	font-family: 'Noto Serif Khitan Small Script';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSerifKhitanSmallScript-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-0329, U+1D00-1EFF, U+2000-2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF,
		U+FFFD, U+16FE4, U+18B00-18CFF;
}

@font-face {
	font-family: 'Noto Serif Hentaigana';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSerifHentaigana-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-0329, U+1D00-1EFF, U+2000-2215, U+2C60-2C7F, U+3099-309C,
		U+A720-A7FF, U+FEFF, U+FFFD, U+1AFF0-1B122;
}

@font-face {
	font-family: 'Noto Serif Nyiakeng Puachue Hmong';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSerifNPHmong-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-0153, U+02BB-0329, U+2000-2215, U+FEFF, U+FFFD, U+1E100-1E14F;
}

@font-face {
	font-family: 'Noto Serif Toto';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSerifToto-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-0329, U+1D00-1EFF, U+2000-2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF,
		U+FFFD, U+1E290-1E2AE;
}

@font-face {
	font-family: 'Noto Serif Ottoman Siyaq';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSerifOttomanSiyaq-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-0329, U+1D00-1EFF, U+2000-2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF,
		U+FFFD, U+1ED01-1ED3D;
}

@font-face {
	font-family: 'Noto Sans HK';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSansHK-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-0359, U+0400-04B1, U+05D1-064A, U+06CC, U+0926-094D, U+0E17-0E44,
		U+1D00-2800, U+28EC-2935, U+29BF-2A2F, U+2B05-2B55, U+2C60-2CF5,
		U+2E1C-2E1D, U+2F00-319F, U+3220-9FFF, U+A1F4, U+A4B0-A4B3, U+A720-A7FF,
		U+A9C1-AA31, U+AB34, U+AC00-AFB8, U+C2A4, U+C5B4, U+C774, U+D55C, U+E253,
		U+E313-E314, U+E5C7-E611, U+E8DB-E8DC, U+F0B2-F232, U+F308, U+F400-F442,
		U+F4DF, U+F610-F611, U+F6B1-FA2C, U+FB01, U+FDFC-FFFD, U+1D7C7, U+1F004,
		U+1F0CF-1F251, U+1F300-1F304, U+1F389-1F495, U+1F602-1F62D, U+1F6F5-1F6F8,
		U+1F910-1F9E6, U+20021-20118, U+201A4-20676, U+2070E-20779, U+2082C-20B0D,
		U+20B8F-21A63, U+21B44-21CAC, U+21D46-2227C, U+22321-22325, U+223BD-22993,
		U+22A66-22EEF, U+22F74-2331F, U+233B4-2383A, U+239C2, U+23AA7-23B5A,
		U+23C63-24B6E, U+24BF5-24C09, U+24C9E-24D13, U+24DB8-2509D, U+2512B-25313,
		U+25419-2549A, U+25531-259CC, U+25A54-25AE9, U+25B74-25F4B, U+25FE1-26626,
		U+266AF-26A52, U+26B05-27486, U+27574-277CC, U+27858-27B65, U+27BEF-27E4F,
		U+27F2E, U+27FF9-2838A, U+28412-28713, U+28804-2882B, U+2890D-28C3B,
		U+28CCA-28EE7, U+28FC5, U+29079-291EB, U+2941D-29448, U+294D0-294E7,
		U+2959E-295F4, U+29720-29732, U+297D4-29A4D, U+29B05-29B0E, U+29BD5,
		U+29C73-29CAD, U+29D3E-29F30, U+29FB7-2A45B, U+2A5C6-2A6A9, U+2ADFF,
		U+2F825-2F8CD, U+2F994-2F9D4, U+F0001-F0019, U+F009B-F012B, U+F01BA-F0224,
		U+FC355, U+FE327, U+FE517, U+FEB97, U+FFFB4;
}

@font-face {
	font-family: 'Noto Sans JP';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSansJP-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-0329, U+0400-04B1, U+1D00-1EFF, U+2000-232A, U+23B0-27A1,
		U+2934-2935, U+29BF-29FB, U+2B05-2B95, U+2C60-2C7F, U+2E3A-36CF,
		U+3761-39B8, U+3A5C-3C26, U+3CC3-4343, U+43EE-4764, U+47E6-48B5,
		U+49B0-4A29, U+4ABC-4C38, U+4CC4-4D77, U+4E00-7E9F, U+7F36-8BA0,
		U+8C37-9485, U+9577-9FCC, U+A720-A7FF, U+F900-FA6D, U+FB00-FB04,
		U+FE10-FE6B, U+FEFF-FFFD, U+1F100-1F251, U+2000B-20213, U+2032B-2044A,
		U+20509-20628, U+206EC-2099D, U+20A64-20B1D, U+20B9F-20BB7, U+20D45-20D58,
		U+20DE1, U+20E64-20E95, U+20F5F, U+21201-21344, U+213C4, U+2146D-2146E,
		U+215D7-21742, U+218BD, U+219C3-21A1A, U+21C56, U+21D2D-21E34,
		U+21F1E-21F76, U+21FFA, U+2217B, U+22218, U+2231E, U+223AD, U+22609,
		U+226F3, U+2285B-228AB, U+2298F, U+22AB8, U+22B46-22C24, U+22DE1-22E42,
		U+22FEB, U+231B6-231F5, U+23372-23647, U+2370C-23764, U+237E7-2383D,
		U+23A98, U+23C7F-23D40, U+23DD3-23DFA, U+23F7E, U+2404B-24103,
		U+241C6-241FE, U+242EE, U+243BC-243D0, U+24629-246A5, U+247F1,
		U+24896-248E9, U+24A4D, U+24B56-24B6F, U+24C16, U+24D14, U+24E04-24E8B,
		U+24FF2-25055, U+25122, U+251A9-2524C, U+2542E-2550E, U+255A7, U+2567F,
		U+25771-257B4, U+25874, U+259C4-259D4, U+25AD7-25AF1, U+25BB2,
		U+25C4B-25C64, U+25DA1, U+25E2E-26060, U+260ED, U+26222-26286, U+2634C,
		U+26402, U+2667E-2671D, U+268DD-26AFF, U+26C29-26CDD, U+26E40-26E65,
		U+26F94-26FF8, U+270F4-27139, U+273DA-27449, U+27614-27752, U+278B2,
		U+27985-279B4, U+27A84, U+27BB3-27CB8, U+27D73-27E10, U+27EAF, U+27FB7,
		U+2808A-280BB, U+28277-282F3, U+283CD-28455, U+284DC, U+2856B-285C9,
		U+286D7-286FA, U+28946-28AE4, U+28BC1-28BEF, U+28CDD-28D71, U+28DFB-28F32,
		U+28FF8, U+292A0-292B1, U+29490, U+295CF, U+2967F-29750, U+29810, U+298C6,
		U+29A72, U+29D4B, U+29DDB-29EE9, U+29FCE-2A0F9, U+2A190, U+2A2B2, U+2A38C,
		U+2A437, U+2A5F1-2A61A, U+2A6B2, U+2A9E6, U+2B746-2B81A, U+2D544, U+2E278,
		U+2E569, U+2E6EA, U+2F804-2F9F4;
}

@font-face {
	font-family: 'Noto Sans KR';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSansKR-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-04B1, U+1D00-1EFF, U+2000-2314, U+2460-266F, U+2716-2793,
		U+2963-2965, U+2AC5-2ACC, U+2C60-2C7F, U+2F00-32A5, U+3380-33DD,
		U+4E00-7E9C, U+7F36-8B9A, U+8C37-947F, U+9577-9C57, U+9CE5-9F9C,
		U+A720-A7FF, U+AC00-D7A3, U+F900-FA0B, U+FEFF-FF5E, U+FFE0-FFFD;
}

@font-face {
	font-family: 'Noto Sans SC';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSansSC-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-036F, U+0400-0579, U+0627-064A, U+0926-094D, U+0E17-0E44,
		U+1D00-1F7B, U+2000-2800, U+28EC-2935, U+2A2F, U+2B05-2BC6, U+2C60-2C7F,
		U+2E1C-2E1D, U+2EBB-319F, U+3220-32A3, U+338E-3449, U+34DC-35CE,
		U+36A2-36AB, U+38A8, U+3DAB-3E1A, U+3F1B-3F6D, U+4495, U+4723, U+48FA,
		U+4CA3, U+4DB6-A134, U+A1F4-A242, U+A4A6-A4B3, U+A720-A7FF, U+A9C1-A9C2,
		U+AC00-AF2D, U+C5B4, U+D55C, U+E600-E715, U+F0A7-F2AE, U+F471-F4B3,
		U+F610-F611, U+F880-FA11, U+FB01-FB02, U+FDFC-FFFD, U+1F004, U+1F170-1F251,
		U+1F300-1F37E, U+F012B;
}

@font-face {
	font-family: 'Noto Sans TC';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSansTC-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-036F, U+0400-064A, U+06CC, U+0926-094D, U+0E17-0E44, U+11AF-12A0,
		U+13A6-141B, U+1555-1557, U+15DC-15E8, U+1780-17DB, U+1871, U+18FA, U+1BFF,
		U+1D00-2800, U+28EC-2935, U+29BF-2A2F, U+2B05-2B55, U+2C60-2CF5,
		U+2E1C-2E1D, U+2F00-319F, U+3220-3479, U+3551-35CE, U+36AC, U+373A, U+3863,
		U+38EC, U+39B8-3A52, U+3B22, U+3BD7-3BFF, U+3CA5, U+3D68-3E74, U+3F08-3F97,
		U+4102-4181, U+43C8, U+4552-4576, U+46E5, U+4837, U+493D, U+4A3B, U+4D09,
		U+4DB6-9FFF, U+A1F4, U+A4B0-A4B3, U+A720-A7FF, U+A9C1-AA31, U+AB34,
		U+AC00-AD6D, U+C2A4, U+C5B4, U+C774, U+D55C, U+E253, U+E313-E314,
		U+E5C7-E611, U+E8DB-E8DC, U+F78A-FA2C, U+FB01, U+FDFC-FFFD, U+1D7C7,
		U+1F004, U+1F0CF-1F251, U+1F300-1F495, U+1F602-1F62D, U+1F921-1F9E6,
		U+20024, U+20487, U+20779, U+20C41-20C78, U+20D71, U+20E98-20EF9,
		U+2107B-210C1, U+22C51, U+233B4, U+24A12, U+2512B, U+2546E, U+25683,
		U+267CC, U+269F2, U+27657, U+282E2, U+2898D, U+29D5A, U+F0001-F0019,
		U+F009B-F012B, U+F01BA-F0224, U+FC355, U+FE327, U+FE517, U+FEB97, U+FFFB4;
}

@font-face {
	font-family: 'Noto Music';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoMusic-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-0329, U+1D00-1EFF, U+2000-2215, U+25CC, U+2669-266F, U+2C60-2C7F,
		U+A720-A7FF, U+FEFF, U+FFFD, U+1D000-1D245;
}

@font-face {
	font-family: 'Noto Sans Symbols 2';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoSansSymbols2-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-03F5, U+1D00-1EFF, U+2000-24FF, U+25A0-2C7F, U+3030, U+4DC0-4DFF,
		U+A720-A7FF, U+FEFF-FF5D, U+FFF9-FFFD, U+10140-101FD, U+102E0-102FB,
		U+10E60-10E7E, U+1D2C0-1D37F, U+1D400-1D7FF, U+1EE00-1EEFF, U+1F000-1F1FF,
		U+1F30D-1FBFF;
}

@font-face {
	font-family: 'Noto Znamenny Musical Notation';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoZnamennyMusicalNotation-Regular.otf)
		format('opentype');
	unicode-range:
		U+0000-03F5, U+1D00-1EFF, U+2000-24FF, U+25A0-2C7F, U+3030, U+4DC0-4DFF,
		U+FEFF-FF5D, U+FFF9-FFFD, U+10140-101FD, U+102E0-102FB, U+10E60-10E7E,
		U+1CF00-1CFC3, U+1D2C0-1D37F, U+1D400-1D7FF, U+1EE00-1EEFF, U+1F000-1F1FF,
		U+1F30D-1FBFF;
}

@font-face {
	font-family: 'Noto Color Emoji';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoColorEmoji-Regular.ttf)
		format('truetype');
	unicode-range:
		U+0023-00AE, U+200D-2049, U+20E3-21AA, U+231A-2328, U+23CF-23FA, U+24C2,
		U+25AA-27BF, U+2934-2935, U+2B05-2B55, U+3030-303D, U+3297-3299, U+FE0F,
		U+1F004, U+1F0CF, U+1F170-1F251, U+1F300-1F6FC, U+1F7E0-1F7F0,
		U+1F90C-1FAF8, U+E0062-E007F;
}

@font-face {
	font-family: 'Noto Emoji';
	font-display: swap;
	src: url(https://davidje13.com/assets/NotoEmoji[wght].ttf) format('truetype');
	unicode-range:
		U+0023-00AE, U+200D-2049, U+20E3-21AA, U+231A-2328, U+23CF-23FA, U+24C2,
		U+25AA-27BF, U+2934-2935, U+2B05-2B55, U+3030-303D, U+3297-3299, U+FE0F,
		U+1F004, U+1F0CF, U+1F170-1F251, U+1F300-1F6FC, U+1F7E0-1F7F0,
		U+1F90C-1FAF8, U+E0062-E007F;
}

.noto {
	font-family:
		'Noto Sans Living', 'Noto Sans Historical', 'Noto Sans SignWriting',
		'Noto Sans Duployan', 'Noto Serif Makasar', 'Noto Serif Todhri',
		'Noto Serif Old Uyghur', 'Noto Serif Dogra', 'Noto Serif Dives Akuru',
		'Noto Serif Tangut', 'Noto Serif Khitan Small Script',
		'Noto Serif Hentaigana', 'Noto Serif Nyiakeng Puachue Hmong',
		'Noto Serif Toto', 'Noto Serif Ottoman Siyaq', 'Noto Music',
		'Noto Sans Symbols 2', 'Noto Znamenny Musical Notation', notdef;
}

.noto-c-emoji {
	font-family: 'Noto Color Emoji', notdef;
}

.noto-bw-emoji {
	font-family: 'Noto Emoji', notdef;
}

.noto-hk {
	font-family: 'Noto Sans HK', notdef;
}

.noto-jp {
	font-family: 'Noto Sans JP', notdef;
}

.noto-kr {
	font-family: 'Noto Sans KR', notdef;
}

.noto-sc {
	font-family: 'Noto Sans SC', notdef;
}

.noto-tc {
	font-family: 'Noto Sans TC', notdef;
}

.any-font {
	font-family:
		'Noto Color Emoji', 'Noto Emoji', 'Noto Sans Living',
		'Noto Sans Historical', 'Noto Sans SignWriting', 'Noto Sans Duployan',
		'Noto Serif Makasar', 'Noto Serif Todhri', 'Noto Serif Old Uyghur',
		'Noto Serif Dogra', 'Noto Serif Dives Akuru', 'Noto Serif Tangut',
		'Noto Serif Khitan Small Script', 'Noto Serif Hentaigana',
		'Noto Serif Nyiakeng Puachue Hmong', 'Noto Serif Toto',
		'Noto Serif Ottoman Siyaq', 'Noto Sans HK', 'Noto Sans JP', 'Noto Sans KR',
		'Noto Sans SC', 'Noto Sans TC', 'Noto Music', 'Noto Sans Symbols 2',
		'Noto Znamenny Musical Notation', sans-serif;
}

.any-font-text {
	font-family:
		'Noto Sans Living', 'Noto Sans Historical', 'Noto Sans SignWriting',
		'Noto Sans Duployan', 'Noto Serif Makasar', 'Noto Serif Todhri',
		'Noto Serif Old Uyghur', 'Noto Serif Dogra', 'Noto Serif Dives Akuru',
		'Noto Serif Tangut', 'Noto Serif Khitan Small Script',
		'Noto Serif Hentaigana', 'Noto Serif Nyiakeng Puachue Hmong',
		'Noto Serif Toto', 'Noto Serif Ottoman Siyaq', 'Noto Sans HK',
		'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC',
		'Noto Music', 'Noto Sans Symbols 2', 'Noto Znamenny Musical Notation',
		'Noto Color Emoji', 'Noto Emoji', sans-serif;
}

body {
	margin: 8px 8px 200px;
	padding: 0;
	font: 1em / 1.5 sans-serif;
	background: #f8f8f8;
	--top-shift: calc(2.5rem + 16px + 16px);
}

dl,
dt,
dd {
	margin: 0;
	padding: 0;
}

nav {
	position: sticky;
	top: 0;
	display: grid;
	gap: 16px;
	justify-content: center;
	margin: -8px -8px 16px;
	padding: 8px;
	background: #ffffff;
	grid-template: 2.5rem / 3em 4em 4em minmax(auto, 20em) 4em 4em 3em;
	box-shadow: 0 4px 2px -2px #00000033;
	z-index: 101;

	& > a {
		font-size: 2em;
		line-height: 2.5rem;
		text-decoration: none;
		padding: 0;
		border-radius: 100px;
		text-align: center;
		font-family: 'Noto Sans Living', sans-serif;

		&:link,
		&:visited {
			color: #0022cc;
		}

		&:hover {
			background: #eeeeee;
		}

		&:active {
			color: #cc0000;
		}
	}

	& .group {
		grid-column: 1;
	}

	& .prev-block {
		grid-column: 2;
	}

	& .prev {
		grid-column: 3;
	}

	& .next {
		grid-column: 5;
	}

	& .next-block {
		grid-column: 6;
	}

	form {
		grid-column: 4;
		display: flex;

		input {
			flex: 1;
			border-radius: 0;
			border-top-left-radius: 100px;
			border-bottom-left-radius: 100px;
			border: 1px solid #808080;
			border-right: none;
			padding: 0 8px 0 16px;
		}

		button {
			border-radius: 0;
			border-top-right-radius: 100px;
			border-bottom-right-radius: 100px;
			padding: 0 16px 0 12px;
			border: 1px solid #808080;
			background: #aaccee;
			cursor: pointer;
		}
	}
}

h1 {
	margin: calc(0px - var(--top-shift)) auto 8px;
	padding-top: var(--top-shift);
	font: 2em / 1.3 sans-serif;
	text-align: center;
	max-width: 80rem;
	min-height: 1.3em;
}

.deprecated h1 {
	text-decoration: line-through 2px;
}

h1 + p {
	text-align: center;
	margin-top: -8px;
}

h2 {
	margin: calc(24px - var(--top-shift)) 0 16px;
	padding-top: var(--top-shift);
	font: 1.5em / 1.3 sans-serif;
	text-align: center;
}

.view {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 16px;
	margin-bottom: 16px;

	& > .entity {
		grid-area: 1 / 2;
		font-size: min(28em, calc(100vw - 32px));
	}

	& .fonts,
	& .related {
		font-size: calc(((28em + 8px) / 3) - 8px);
		display: grid;
		grid-template-columns: repeat(auto-fill, 1em);
		grid-template-rows: repeat(3, 1em);
		grid-auto-flow: column;
		gap: 8px;
		overflow-x: auto;
		margin: -8px -8px -16px;
		padding: 8px;
	}

	& .fonts {
		grid-area: 1 / 1;
		direction: rtl;

		& > * {
			direction: ltr;
		}
	}

	@media (max-width: calc(28em + (((28em + 8px) / 3) - 8px + 16px) * 2 + 32px)) {
		display: flex;
		flex-flow: column;

		& .entity {
			align-self: center;
		}

		& .fonts,
		& .related {
			direction: ltr;
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
		}
	}
}

.modifier {
	display: flex;
	flex-direction: column;
	gap: 4px;
	grid-area: 2 / 2;
	background: #ffffff;
	margin-top: -16px;
	z-index: 1;
	justify-self: center;
	align-self: center;
	padding: 16px 8px 4px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	box-shadow: 0 1px 1px #00000033;

	ul {
		display: flex;
		flex-flow: row wrap;
		margin: 0;
		padding: 0;
		list-style: none;
		justify-content: center;
		gap: 4px;

		li {
			margin: 0;
			padding: 0;

			a {
				display: inline-block;
				font-size: 2em;
				padding: 4px;
				border-radius: 4px;
				text-decoration: none;
				line-height: 1;
				min-width: 1em;
				text-align: center;

				&:link,
				&:visited {
					color: #000000;
				}

				&[aria-current='page'] {
					background: #2273c4;
					color: #ffffff;
				}

				&:not([aria-current='page']):hover {
					background: #ddeeff;
				}
			}
		}
	}
}

.names {
	ul {
		list-style: none;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		margin: 0 0 8px;
		padding: 0;
	}

	li {
		margin: 0;
		padding: 0;

		&:not(:first-child)::before {
			content: '/';
			margin: 0 0.5em;
		}
	}
}

.decomposition {
	display: flex;
	flex-flow: row wrap;
	gap: 8px;
	font-size: 4em;
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: center;

	li {
		margin: 0;
		padding: 0;
	}
}

.entity {
	display: grid;
	align-items: center;
	justify-items: center;
	background: #ffffff;
	border-radius: 4px;
	width: 1em;
	height: 1em;
	position: relative;
	box-shadow: 0 1px 2px #00000033;
	text-decoration: none;
	color: inherit;
	overflow: hidden;

	& .render {
		position: relative;
		font-size: 0.4em;
		line-height: 1;
		max-width: 100%;
		border: 1px solid #80ccff;
		user-select: contain;

		&::before {
			content: '';
			display: inline-block;
			width: 100%;
			margin-right: -100%;
			vertical-align: baseline;
			height: 1px;
			background: #80ccff;
		}
	}

	& .name {
		position: absolute;
		bottom: 2px;
		left: 2px;
		right: 2px;
		font-size: max(0.04em, 12px);
		text-align: center;
	}

	&:link,
	&:visited {
		box-shadow:
			0 0 0 1px #0000cc,
			0 1px 2px #00000033;

		&:hover {
			background: #ddeeff;
		}
	}
}

.deprecated .view > .entity .name {
	text-decoration: line-through 2px #00000080;
}

dl.details {
	display: flex;
	flex-flow: column;
	gap: 4px;
	margin-bottom: 32px;

	div {
		display: flex;
		flex-flow: row wrap;
		align-items: baseline;
		gap: 0 8px;

		dt {
			flex: 1;
			font-weight: bold;
			text-align: right;
		}

		dd {
			flex: 1;
		}
	}
}

dl.representation {
	display: flex;
	flex-flow: column;
	gap: 4px;
	margin-bottom: 32px;

	div {
		display: flex;
		flex-flow: row wrap;
		align-items: baseline;
		gap: 0 8px;

		dt {
			flex: 1;
			font-weight: bold;
			text-align: right;
		}

		dd {
			flex: 1;
			font: 1em / 1 monospace;
			user-select: all;
		}
	}
}

.deprecated dl.representation dd {
	text-decoration: line-through 1px;
}

dl.languages {
	display: grid;
	grid-template-columns: repeat(auto-fill, 20em);
	align-content: center;
	justify-content: center;
	align-items: start;
	gap: 16px;

	& > div {
		background: #ffffff;
		padding: 8px;
		border-radius: 4px;
		box-shadow: 0 1px 2px #00000033;

		dt {
			font-weight: bold;
			text-align: center;
			margin: 0 0 8px;
		}

		dd {
			margin: 4px 0 0;
		}
	}
}

code {
	display: inline-block;
	max-width: calc(100% - 4px);
	box-sizing: border-box;
	background: #eeffff;
	color: #000080;
	border: 1px solid #000080;
	user-select: all;
	border-radius: 2px;
	padding: 1px 4px;
	margin: 0 2px;
	overflow-wrap: break-word;
}

.deprecated code {
	text-decoration: line-through 1px;
}

.block-list {
	display: flex;
	flex-flow: row wrap;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	gap: 16px;
	max-width: 80rem;
	justify-content: center;

	li {
		display: block;
		margin: 0;

		a {
			display: block;
			background: #ffffff;
			padding: 8px 16px 6px;
			border-radius: 4px;
			box-shadow: 0 1px 2px #00000033;
			text-decoration: none;
		}
	}
}

.grid {
	margin: 0 auto 16px;
	display: grid;
	--size: min(4rem, 5.5vw);
	grid-template-columns: repeat(16, var(--size));
	grid-auto-rows: var(--size);
	width: max-content;

	a {
		position: relative;
		display: block;
		line-height: var(--size);
		font-size: calc(var(--size) * 0.5);
		text-align: center;
		background: #ffffff;
		margin: -1px -1px 0 0;
		border: 1px solid #808080;
		text-decoration: none;
		overflow: hidden;
		z-index: 0;
		transition:
			transform ease 0.1s,
			background ease 0.1s,
			z-index ease 0.1s;

		&:hover,
		&:focus-visible {
			background: #e6f2ff;
			transform: scale(1.8);
			z-index: 100;

			& > span {
				color: #000000;
			}
		}

		&.na {
			background: #eeeeee;
			font: calc(var(--size) * 0.15) / var(--size) sans-serif;
			color: #666666;
		}

		& > span {
			display: block;
			position: absolute;
			bottom: 2px;
			left: 2px;
			right: 2px;
			text-align: center;
			font: 6px / 1.2 sans-serif;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	& .skip {
		font: 1em sans-serif;
		grid-column: 1 / -1;
		grid-row: span attr(data-h type(<number>), 1);
		text-align: center;
		line-height: var(--size);
		margin: -1px -1px 0 0;
		border: 1px solid #808080;
		background: #eeeeee;
	}
}