@import "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap";
* { margin: 0; padding: 0; box-sizing: border-box; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

:root { color-scheme: dark; }

body { height: 100vh; width: 100%; font: 1em/1.5 "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: #b1b1b3; background: #202020; scroll-behavior: smooth; }
body.light-mode { color-scheme: light; color: #333333; background: #f5f5f5; }

a:active, a:focus { outline: 1px dotted rgba(255, 255, 255, 0.5); outline-offset: 0.25rem; }

a:focus:not(:active) { outline: 0.1875rem solid #fff; -moz-outline-radius: 0.25rem; outline-offset: 0.25rem; }

code { line-height: 1; font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; }

p code { font-size: 85%; padding: 0.2em 0.4em; border-radius: 0.1875rem; background-color: rgba(255, 255, 255, 0.125); }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0.25rem 1rem; color: #fff; font-size: 1rem; text-decoration: none; text-align: center; border-radius: 0.1875rem; border: 0.0625rem solid rgba(255, 255, 255, 0.2); background: none; cursor: pointer; }
.button:focus, .button:hover { background: rgba(255, 255, 255, 0.2); }
.button:active, .button:focus { outline: 1px dotted #fff; outline-offset: 0.25rem; border-color: rgba(255, 255, 255, 0.75); }
.button::-moz-focus-inner { border: none; }

.button .icon { margin-right: 0.25em; }

.button-group { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin: -0.5rem; }
.button-group:not(:last-child) { margin-bottom: 0.5rem; }
.button-group > .button { margin: 0.5rem; }

.icon { display: inline-block; width: 1em; height: 1em; vertical-align: middle; transform-origin: center center; transition: transform ease-out 0.3s; background-size: cover; }

.icon--gear { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M92.347 41.162L84.113 40.1c-.096-.33-.193-.656-.293-.965l-.125-.373c-.115-.343-.229-.685-.348-.998a14.185 14.185 0 00-.186-.484l-.08-.209a21.11 21.11 0 00-.266-.668c-.091-.217-.185-.432-.279-.647l-.299-.672a34.557 34.557 0 00-.488-1.007c-.004-.01-.042-.084-.045-.094l-.1-.194c-.152-.297-.31-.591-.484-.907l5.074-6.574a3.044 3.044 0 00-.258-4.014l-8.229-8.229a3.046 3.046 0 00-4.014-.256l-6.574 5.071c-.299-.166-.6-.327-.891-.478a8.774 8.774 0 00-.257-.127l-.062-.03a32.94 32.94 0 00-1.444-.682l-.187-.082a27.99 27.99 0 00-.68-.295c-.234-.099-.473-.189-.711-.281l-.638-.245a36.328 36.328 0 00-1.077-.373l-.288-.097a33.457 33.457 0 00-.989-.301l-1.063-8.234a3.043 3.043 0 00-3.02-2.656h-11.63a3.049 3.049 0 00-3.021 2.656l-1.062 8.234c-.331.096-.657.194-.974.297l-.305.102c-.36.119-.721.242-1.072.371-.125.047-.252.096-.377.145l-.146.057-.072.027c-.252.098-.504.195-.744.295-.229.096-.453.194-.681.295l-.219.097-.422.188c-.332.152-.659.314-.998.483l-.306.151c-.303.154-.6.313-.905.483l-6.573-5.071a3.042 3.042 0 00-4.013.256l-8.228 8.229a3.045 3.045 0 00-.258 4.014l5.072 6.573c-.165.3-.328.601-.486.91l-.154.312c-.162.324-.321.647-.479.99l-.287.646c-.095.215-.188.43-.293.674-.106.264-.211.531-.326.831l-.061.155c-.046.117-.093.233-.132.347-.133.358-.256.722-.389 1.121-.031.089-.062.177-.082.241-.104.33-.205.66-.302.992l-8.233 1.063a3.043 3.043 0 00-2.656 3.02v11.635a3.046 3.046 0 002.656 3.021l8.234 1.063c.096.33.195.662.307 1.006l.096.281c.117.356.238.713.367 1.061.05.135.101.266.151.398l.103.262c.089.23.177.459.271.684.095.23.195.457.298.686l.096.216c.061.142.121.278.186.42.156.336.32.67.48.991l.156.312c.152.302.313.599.482.906l-5.073 6.571a3.044 3.044 0 00.259 4.015l8.228 8.228a3.045 3.045 0 004.013.258l6.574-5.072c.301.166.604.328.908.484l.289.145c.334.168.67.332 1.006.488.131.061.264.119.396.176l.168.074c.25.111.502.223.76.33.221.092.442.178.666.264l.299.117c.125.049.25.096.378.143.348.127.698.248 1.063.369l.303.102c.32.104.645.199.981.299l1.062 8.234a3.045 3.045 0 003.021 2.656h11.635a3.047 3.047 0 003.02-2.656l1.063-8.234c.329-.096.658-.194.987-.301l.312-.104c.354-.117.705-.238 1.045-.363.133-.047.263-.098.394-.15l.249-.096c.236-.092.473-.182.707-.279.24-.1.48-.204.719-.311l.229-.102c.125-.055.248-.109.373-.166.342-.158.682-.326 1.033-.502l.267-.133c.301-.154.599-.314.907-.484l6.574 5.072a3.041 3.041 0 004.012-.258l8.229-8.228a3.05 3.05 0 00.26-4.015l-5.072-6.571c.168-.308.334-.615.494-.931l.113-.229c.178-.354.352-.707.512-1.057l.278-.623c.104-.234.207-.469.308-.711s.195-.488.293-.744l.065-.168c.056-.143.11-.283.16-.424.121-.326.231-.656.353-1.012l.117-.347c.104-.323.2-.646.297-.979l8.233-1.063a3.04 3.04 0 002.656-3.02V44.182a3.046 3.046 0 00-2.657-3.02zm-27.689 8.836c0 8.08-6.574 14.654-14.656 14.654-8.08 0-14.653-6.574-14.653-14.654s6.573-14.654 14.653-14.654c8.082 0 14.656 6.574 14.656 14.654zM34.094 78.305z" fill="white" /></svg>'); }

.icon--notebook { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M885.7 882.7H139.2c-2.6 0-5.2-.1-7.7-.4 2.7.4 5.3.7 8 1.1-4.9-.7-9.6-1.9-14.2-3.7l7.2 3c-3.2-1.4-6.4-3-9.3-4.9-6.1-4 4.5 4.1.8.8-1.3-1.2-2.6-2.3-3.9-3.5-1.2-1.2-2.4-2.6-3.5-3.9-3.2-3.7 4.8 6.9.8.8-1.9-2.9-3.5-6.1-4.9-9.3l3 7.2c-1.8-4.6-3.1-9.3-3.7-14.2.4 2.7.7 5.3 1.1 8-.8-7.4-.4-15.1-.4-22.5v-45.8-151.9-184.4-159.7c0-25-.1-50 0-75 0-2.5.1-5 .4-7.6-.4 2.7-.7 5.3-1.1 8 .7-4.9 1.9-9.6 3.7-14.2l-3 7.2c1.4-3.2 3-6.4 4.9-9.3 4-6.1-4.1 4.5-.8.8 1.2-1.3 2.3-2.6 3.5-3.9 1.2-1.2 2.6-2.4 3.9-3.5 3.7-3.2-6.9 4.8-.8.8 2.9-1.9 6.1-3.5 9.3-4.9l-7.2 3c4.6-1.8 9.3-3.1 14.2-3.7-2.7.4-5.3.7-8 1.1 8.4-.9 17.1-.4 25.5-.4h727.8c2.6 0 5.2.1 7.7.4-2.7-.4-5.3-.7-8-1.1 4.9.7 9.6 1.9 14.2 3.7l-7.2-3c3.2 1.4 6.4 3 9.3 4.9 6.1 4-4.5-4.1-.8-.8 1.3 1.2 2.6 2.3 3.9 3.5 1.2 1.2 2.4 2.6 3.5 3.9 3.2 3.7-4.8-6.9-.8-.8 1.9 2.9 3.5 6.1 4.9 9.3l-3-7.2c1.8 4.6 3.1 9.3 3.7 14.2-.4-2.7-.7-5.3-1.1-8 .8 7.4.4 15.1.4 22.5v541.8c0 25 .1 50 0 75 0 2.5-.1 5-.4 7.6.4-2.7.7-5.3 1.1-8-.7 4.9-1.9 9.6-3.7 14.2l3-7.2c-1.4 3.2-3 6.4-4.9 9.3-4 6.1 4.1-4.5.8-.8-1.2 1.3-2.3 2.6-3.5 3.9-1.2 1.2-2.6 2.4-3.9 3.5-3.7 3.2 6.9-4.8.8-.8-2.9 1.9-6.1 3.5-9.3 4.9l7.2-3c-4.6 1.8-9.3 3.1-14.2 3.7 2.7-.4 5.3-.7 8-1.1-2.3.2-4.5.3-6.8.4-15.7.2-30.7 13.7-30 30 .7 16.1 13.2 30.2 30 30 32.5-.4 64.6-19.4 77.7-49.7 5.4-12.5 8.3-25.2 8.3-38.9v-36.8-70.9-93.9-106.2-106.4V344v-74.1-41.4c0-5.3-.2-10.3-1-15.7-4.5-33.8-28.6-62.3-61.6-71.9-12.8-3.7-25.7-3.3-38.8-3.3H142.9c-2.5 0-5-.1-7.5.1-36.1 1.8-65.8 24.5-78.5 58.1-5.4 14.3-4.7 29.6-4.7 44.5V836.7c0 12.5-.2 24.4 1.8 36.8 5.1 31.7 32.4 59.2 63.3 66.5 7.9 1.9 16 2.6 24.2 2.6h743.9c15.7 0 30.7-13.8 30-30-.5-16.2-12.9-29.9-29.7-29.9z" fill="white"/><path d="M207.7 441.9h540.4c25 0 50 .4 75 0h1c15.7 0 30.7-13.8 30-30-.7-16.3-13.2-30-30-30H283.7c-25 0-50-.4-75 0h-1c-15.7 0-30.7 13.8-30 30 .7 16.3 13.2 30 30 30zM574.2 704.2H252.8c-14.8 0-29.6-.3-44.4 0h-.7c-15.7 0-30.7 13.8-30 30 .7 16.3 13.2 30 30 30h321.4c14.8 0 29.6.3 44.4 0h.7c15.7 0 30.7-13.8 30-30-.7-16.2-13.2-30-30-30zM284.2 223.7v-98.5-13.8c0-15.7-13.8-30.7-30-30-16.3.7-30 13.2-30 30v112.3c0 15.7 13.8 30.7 30 30 16.2-.8 30-13.2 30-30zM396.1 111.3v112.3c0 15.7 13.8 30.7 30 30 16.3-.7 30-13.2 30-30v-98.5-13.8c0-15.7-13.8-30.7-30-30-16.3.8-30 13.2-30 30zM739.8 111.3v112.3c0 15.7 13.8 30.7 30 30 16.3-.7 30-13.2 30-30v-98.5-13.8c0-15.7-13.8-30.7-30-30-16.2.8-30 13.2-30 30zM627.9 223.7v-98.5-13.8c0-15.7-13.8-30.7-30-30-16.3.7-30 13.2-30 30v112.3c0 15.7 13.8 30.7 30 30 16.3-.8 30-13.2 30-30zM825.2 543.1H284.8c-25 0-50-.4-75 0h-1c-15.7 0-30.7 13.8-30 30 .7 16.3 13.2 30 30 30h540.4c25 0 50 .4 75 0h1c15.7 0 30.7-13.8 30-30-.7-16.3-13.2-30-30-30z" fill="white"/></svg>'); }

.icon--shout { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M49.043,85.154l-9.371-18.13l-19.345,9.823l7.281-14.72L1.924,66.185l20.264-15.098L3.474,41.244l21.246-0.48l-8.215-19.728  l21.103,10.347l3.312-20.212l9.968,18.338L62.52,16.693l2.413,17.713l27.225-8.567L72.227,46.153l25.587,9.662l-25.632,2.204  l12.717,18.786l-27.63-11.201L49.043,85.154z M41.511,61.321l7.137,13.808l6.329-15.042l18.565,7.526L64.6,54.403l14.205-1.221  l-14.178-5.354l12.587-12.829l-15.813,4.977l-1.862-13.671L50.01,36.802l-6.902-12.698l-2.231,13.619L24.77,29.825l6.267,15.05  l-11.051,0.25l10.155,5.341L18.29,59.294l16.773-2.65l-5.251,10.618L41.511,61.321z" fill="white"/></svg>'); }

.caniwebview { display: flex; flex-direction: column; min-height: 100vh; }

.main { flex: 1 0 auto; width: 100%; margin: 0 auto; padding: 0 4rem; }
@media screen and (max-width: 900px) { .main { padding: 0 1rem; } }

.menu { position: relative; display: flex; flex-direction: row; margin-bottom: 0.625rem; }
@media screen and (max-width: 900px) { .menu { padding: 0; overflow-x: scroll; } }

header { padding: 0 4rem; }
@media screen and (max-width: 900px) { header { padding: 0 1rem; } }

header > .search-wrapper { width: 100%; margin: 0 auto; }

.menu > img.w3-community-logo { height: 50px; margin-right: 10px; }

.nav { display: flex; flex-direction: row; }
@media only screen and (max-width: 30rem) { .nav { width: 100%; } }
@media only screen and (min-width: 50.0625rem), only screen and (max-width: 30rem) { .nav { display: contents; } }

.tab { margin-right: 0.125rem; margin-left: 0.125rem; padding: 0.5em; min-height: 2.5rem; color: #fff; font-weight: 300; font-size: 1.25rem; text-decoration: none; white-space: nowrap; background-color: rgba(255, 255, 255, 0.1); text-transform: capitalize; }
@media only screen and (min-width: 35rem) { .tab { text-transform: none; } }
.tab.current { background-color: #003E6B; }
.tab:not(.current):focus, .tab:not(.current):hover { background-color: #004D85; }
@media only screen and (min-width: 50.0625rem) { .tab:last-child { margin-right: 0; } }
.menu > .tab { margin-right: 0; }
@media only screen and (max-width: 30rem) { .tab { display: flex; align-items: center; justify-content: center; flex-grow: 1; padding-left: 0.5em; padding-right: 0.5em; font-size: 1rem; } }
@media only screen and (max-width: 19.9375rem) { .tab { font-size: 0.85rem; } }

.tab-longname { display: none; }
@media only screen and (min-width: 35rem) { .tab-longname { display: inline; } }

.latest-post { position: relative; display: flex; flex-grow: 1; flex-direction: row; justify-content: center; align-items: center; white-space: nowrap; overflow: hidden; padding: 0.25rem 0.75rem; min-height: 2rem; font-weight: 300; font-size: 1.125rem; }
.latest-post a:hover { text-decoration: none; }
@media only screen and (max-width: 50rem) { .latest-post { display: none; } }

.latest-post-date::after { content: '-'; margin: 0 0.5ch; }

.latest-post-title { color: #fff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.latest-post-title:focus, .latest-post-title:hover { color: #67bfff; text-decoration: underline; }
.latest-post-title::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }

.theme-toggle { display: flex; align-items: center; justify-content: center; margin-left: 0.5rem; padding: 0.5em; min-width: 2.5rem; min-height: 2.5rem; background-color: rgba(255, 255, 255, 0.1); border: none; border-radius: 0.25rem; cursor: pointer; color: #fff; font-size: 1.25rem; transition: background-color 0.2s, transform 0.1s; }
.theme-toggle:hover { background-color: #004D85; }
.theme-toggle:focus { background-color: #004D85; outline: 2px solid #fff; outline-offset: 2px; }
.theme-toggle:active { transform: scale(0.95); }
@media (prefers-contrast: high) { .theme-toggle { border: 2px solid currentColor; } }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; }
  .theme-toggle:active { transform: none; } }
.theme-toggle .theme-toggle-icon { display: inline-block; line-height: 1; pointer-events: none; }
body.light-mode .theme-toggle { color: #333; }
body.light-mode .theme-toggle:hover { background-color: rgba(0, 0, 0, 0.2); }
body.light-mode .theme-toggle:focus { background-color: rgba(0, 0, 0, 0.2); outline-color: #333; }

.search { position: relative; margin-bottom: 1rem; padding: 2rem; color: #fff; line-height: 1.5; font-size: 2.5rem; font-weight: 300; text-align: center; background: #005A9C; transform-origin: top center; transition: transform ease-in-out 0.3s, opacity ease-in-out 0.3s; }
@media only screen and (max-width: 50rem) { .search { font-size: 1.5rem; } }
@media only screen and (max-width: 23.4375rem) { .search { font-size: 1rem; } }
.search .search-form { display: grid; }
@media only screen and (max-width: 50rem) { .search .search-form { align-items: center; } }

.search-category-button { display: none; margin-bottom: 1.5rem; border: 0; background-color: #2a2a2e; cursor: pointer; }
.search-category-button span { padding: 0.3125rem; }
.search-category-button .search-category-x { border-right: 1px solid #8d8d97; }

.search-label { grid-column: 1; grid-row: 1; text-align: right; }

.search-question-mark { grid-column: 3; grid-row: 1; text-align: left; }

.search-actions { grid-row: 2; grid-column: 1 / 4; margin-top: 1rem; }

@media only screen and (min-width: 50.0625rem) { .search-actions { display: flex; grid-column: 3; grid-row: 1; align-self: center; justify-self: flex-start; margin-left: 1rem; margin-top: 0; } }
.search .button { margin-left: 1rem; }
@media only screen and (max-width: 23.4375rem) { .search .button { font-size: 0.75rem; } }
@media only screen and (min-width: 50.0625rem) { .search .button { width: max-content; height: max-content; } }

.search-input-container { position: relative; padding: 0 1rem; width: 100%; grid-column: 2; grid-row: 1; }
.search-input-container::before { content: ''; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; position: absolute; right: 2rem; top: 50%; margin-top: -1rem; font-size: 1rem; border-radius: 50%; background-color: #005A9C; transform: scale(0); transition: transform ease 0.2s; }
@media only screen and (max-width: 50rem) { .search-input-container::before { width: 1.5rem; height: 1.5rem; right: 1rem; margin-top: -0.75rem; } }
@media only screen and (max-width: 50rem) { .search-input-container { padding-left: 0.5rem; padding-right: 0.5rem; } }

.search-input { width: 100%; min-width: 0; color: inherit; font: inherit; text-align: center; background: none; border: none; -webkit-appearance: none; appearance: none; border-bottom: 1px solid #fff; border-radius: 0; outline: none; }
.search-input:active, .search-input:focus { background: #003E6B; }
.search-input::-webkit-search-cancel-button { margin-right: 1.375rem; }
.search-input::placeholder { color: rgba(255, 255, 255, 0.5); }
@media only screen and (max-width: 50rem) { .search-input { margin-right: 0; order: 1; min-height: 2.25rem; } }

.search--loading .search-input-container::before { background-image: url(/assets/images/favicon.ico); background-size: cover; transform: scale(1); animation: spin linear 1s infinite; transition-delay: 0.125s; animation-delay: 0.125s; }

@keyframes spin { from { rotate: 0; }
  to { rotate: 1turn; } }
.search-empty { width: 100%; max-width: 64rem; margin: 1rem auto 0; grid-row: 3; grid-column: 1 / 4; font-size: 1rem; }
@media only screen and (min-width: 50.0625rem) { .search-empty { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.search-empty a { color: inherit; }
.search-empty b { font-weight: bold; }
.search-empty .icon { margin-right: 0.25rem; margin-top: 0.25rem; vertical-align: top; }
.search-empty .icon--shout { font-size: 1.5rem; margin-top: 0; vertical-align: middle; }

.versus { position: relative; padding: 1rem; margin-bottom: 1rem; background-color: #2a2a2e; border: 1px solid #3c3c3d; display: flex; justify-content: center; }
.versus h1 { color: #fff; font-size: 1.25rem; }

.versus-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.versus-icon .icon { font-size: 3.5rem; }
.versus-icon::before { content: 'vs'; position: absolute; left: 0; top: -0.25rem; bottom: 0; right: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; color: #fff; letter-spacing: -0.05em; transform: rotate(-8deg); text-shadow: -2px 2px 0 #2a2a2e, -2px -2px 0 #2a2a2e, 2px -2px 0 #2a2a2e, 2px 2px 0 #2a2a2e; }

.list-title { display: inline-block; padding: 0.5em 0; margin-bottom: 0.5em; font-size: 1.375rem; font-weight: 300; border-bottom: 2px solid rgba(255, 255, 255, 0.2); }
.list-title:hover { color: #67bfff; }
.list-title a { color: inherit; text-decoration: none; }

.list { margin-left: 1rem; }
.list > li { list-style: none; }
.list a { color: #fff; text-decoration: none; }
.list a:focus, .list a:hover { color: #67bfff; text-decoration: underline; }

.footer { display: flex; flex-direction: column; justify-content: space-between; margin-top: 5rem; border-top: 2px solid rgba(255, 255, 255, 0.2); padding: 2em; font-size: 0.85em; line-height: 1.8rem; }
.footer a { color: inherit; }
.footer a:focus, .footer a:hover { color: #fff; }
.footer p:not(:last-child) { margin-bottom: 0.75rem; }
@media only screen and (min-width: 60rem) { .footer { flex-direction: row; } }

.footer-section { padding-bottom: 2rem; max-width: 40rem; }
.footer-section ul { margin-bottom: 0.75rem; list-style: none; }
@media only screen and (min-width: 60rem) { .footer-section { flex-shrink: 1; }
  .footer-section:not(:last-child) { padding-bottom: 0; padding-right: 1rem; } }

.footer-title { margin-bottom: 0.75rem; color: #fff; font-size: 1em; font-weight: 300; }

.legend-list { list-style: none; }
.legend-list li { display: flex; flex-direction: row; align-items: center; }
.legend-list span { display: inline-block; width: 1.5rem; height: 0.75rem; margin-right: 0.25rem; }

@media only screen and (max-width: 53.6875rem) { .footer-links li { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
  .footer-links li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.2); }
  .footer-links a { display: block; padding: 0.75rem 0; line-height: 1.5rem; } }

.a11y-colors { min-width: 12.5rem; }

.link-button { -webkit-appearance: none; background: none; border: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.link-button:focus, .link-button:hover { color: #fff; }
.link-button:active, .link-button:focus { outline: 1px dotted currentColor; outline-offset: 0.25rem; }
.link-button:focus:not(:active) { outline: 0.1875rem solid #fff; -moz-outline-radius: 0.25rem; outline-offset: 0.25rem; }
.link-button::-moz-focus-inner { border: none; }

.beta, .warning { color: #1b1b1d; background: #fbd91b; }

.warning { width: 100%; margin-top: 2rem; padding: 0.0625rem; }

.beta { display: inline-block; padding: 0 0.25rem; }

.beta-tag { display: inline-block; padding: 0 0.25rem; color: #000; font-size: 0.5em; text-transform: uppercase; vertical-align: text-top; background: #fbd91b; }

.scoreboard { list-style: none; counter-reset: scoreboard; }
.scoreboard > li { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 0.5rem; counter-increment: scoreboard; }
.scoreboard > li::before { content: counter(scoreboard) "."; margin-right: 0.5rem; width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.homepage .scoreboard > li::before { width: 1rem; text-align: center; }
.scoreboard > li.not-enough-tests { display: none; }

.score { display: inline-flex; flex-direction: row; width: 12.5rem; height: 1.5rem; margin-right: 0.5rem; }
.score > div { flex-shrink: 0; flex-grow: 1; flex-basis: auto; }
@media (max-width: 30rem) { .score { width: calc(100% - 6rem); margin-right: 0; } }

.score-name { color: #fff; }
.score-name a { color: inherit; text-decoration: none; }
.score-name a:hover, .score-name a:focus { text-decoration: underline; }

.post--scoreboard { text-align: center; }
.post--scoreboard .scoreboard { display: inline-block; margin-left: 0; }
.post--scoreboard .scoreboard > li { padding-right: 3rem; }
@media only screen and (max-width: 40rem) { .post--scoreboard .scoreboard > li { padding-right: 0; }
  .post--scoreboard .scoreboard .score-text { width: 100%; margin: 0.25rem 0 1rem 3rem; text-align: left; } }

.scoreboard-intro { margin-bottom: 3rem; }
.scoreboard-intro > h1 { color: #fff; }

.settings { overflow: hidden; color: #fff; background: #005A9C; max-height: 100vh; transition: visibility .5s, max-height .5s; }
.settings.hidden { max-height: 0; }
.settings form { margin: 1.8rem 0 0; }
.settings input[type="checkbox"] { position: absolute; opacity: 0; -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 1rem; height: 1rem; background: none; border: 1px solid #fff; }
.settings input[type="checkbox"] + label { display: flex; line-height: 1.25; align-items: center; }
.settings input[type="checkbox"] + label::before { content: ''; display: inline-flex; align-items: center; justify-content: center; margin-right: 0.5625rem; flex-grow: 0; flex-shrink: 0; width: 1rem; height: 1rem; background: none; border: 1px solid #fff; box-sizing: border-box; }
.settings input[type="checkbox"]:focus + label { outline: 1px dotted #fff; outline-offset: 0.25rem; }
.settings input[type="checkbox"]:checked + label::before { content: '\2714\FE0E'; font-size: 0.85em; color: #005A9C; background-color: #fff; }
.settings input[type="checkbox"]:indeterminate + label::before { content: '-'; font-weight: bold; font-family: sans-serif; }

.settings-title, .compare-title { padding: 1rem; font-size: 1.5rem; width: 100%; display: flex; justify-content: flex-start; align-items: center; }
@media only screen and (max-width: 50rem) { .settings-title, .compare-title { font-size: 1.25rem; } }
@media only screen and (max-width: 23.4375rem) { .settings-title, .compare-title { font-size: 1rem; } }
.settings-title .button, .compare-title .button { font-size: 0.75rem; min-width: 6.25rem; }
.settings-title .button-group, .compare-title .button-group { display: inline-flex; margin-left: 0.5rem; }
.settings-title .button-group > .button, .compare-title .button-group > .button { margin-left: 0; margin-right: 0; }
.settings-title .button-group > .button:not(:last-child), .compare-title .button-group > .button:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -0.0625rem; }
.settings-title .button-group > .button:not(:first-child), .compare-title .button-group > .button:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.settings-title-actions { display: inline-flex; margin-left: 1ch; vertical-align: middle; }

.settings-options { position: relative; overflow: auto; }

.settings-list { display: flex; list-style: none; }
.settings-list ul { list-style: none; margin-left: 1.5rem; }

.settings-child-list { margin-top: 0.5rem; }

.settings-list-item { flex-shrink: 0; flex-grow: 0; min-width: 9.5rem; max-width: 12rem; padding: 0.8rem; border-top: 1px solid rgba(255, 255, 255, 0.25); font-size: 1rem; }
.settings-list-item:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.25); }
.settings-list-item:nth-child(2n) { background-color: rgba(255, 255, 255, 0.05); }

.settings-child-list-item { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.2; }
.settings-child-list-item input[type="checkbox"] + label::before { margin-top: -0.1rem; }

.settings-opened .settings-button .icon { transform: rotate(90deg); }

.compare { position: relative; overflow: hidden; margin: 0 0 1rem; color: #fff; }
.compare .filter { background: #003E6B !important; }
.compare .filter ul { margin-left: unset; list-style: none; }
.compare input[type="checkbox"] { position: absolute; opacity: 0; -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 1rem; height: 1rem; background: none; border: 1px solid #fff; }
.compare input[type="checkbox"] + label { display: flex; line-height: 1.25; align-items: center; }
.compare input[type="checkbox"] + label::before { content: ''; display: inline-flex; align-items: center; justify-content: center; margin-right: 0.5625rem; flex-grow: 0; flex-shrink: 0; width: 1rem; height: 1rem; background: none; border: 1px solid #fff; box-sizing: border-box; }
.compare input[type="checkbox"]:focus + label { outline: 1px dotted #fff; outline-offset: 0.25rem; }
.compare input[type="checkbox"]:checked + label::before { content: '\2714\FE0E'; font-size: 0.85em; color: #005A9C; background-color: #fff; }
.compare input[type="checkbox"]:indeterminate + label::before { content: '-'; font-weight: bold; font-family: sans-serif; }

.compare-options { position: relative; overflow: auto; }
.compare-options.category { display: flex; gap: 1em; }
.compare-options.category ul { margin-left: unset; flex-wrap: wrap; }
@media screen and (max-width: 900px) { .compare-options.category ul { flex-wrap: nowrap; } }

.compare-title { display: block; font-size: 1.2rem; }
.compare-title legend { background: #005A9C; padding: 0.2em 0.5em; }
.compare-title .compare-right { float: right; }
@media screen and (max-width: 495px) { .compare-title .compare-right .button-group { margin-bottom: 2em; } }

.compare-list { display: flex; list-style: none; }

.compare-child-list { margin-top: 0.5rem; }

.compare-list-item { flex-shrink: 0; flex-grow: 0; min-width: 9.5rem; max-width: 12rem; padding: 0.8rem; font-size: 1rem; }

.compare-child-list-item { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.2; }
.compare-child-list-item input[type="checkbox"] + label::before { margin-top: -0.1rem; }

.compare-results { margin-bottom: 1rem; }
.compare-results:not(:empty) ~ .post--default { display: none; }

.clients-comparison { position: relative; overflow-x: auto; }

.clients-comparison-table { min-width: 100%; border-spacing: 0.125rem; border-collapse: separate; }
.clients-comparison-table .data-family-name, .clients-comparison-table .data-platform-name { min-height: 0; }
.clients-comparison-table tbody td { padding: 0 1rem; height: 2rem; color: #fff; text-align: center; white-space: nowrap; }
.clients-comparison-table thead td, .clients-comparison-table tbody th { position: sticky; left: 0; z-index: 1; background-color: #2a2a2e; }
.clients-comparison-table tbody th { padding-right: 1rem; width: 18.75rem; text-align: left; font-weight: normal; }
.clients-comparison-table tbody th a { text-decoration: none; color: #fff; }
.clients-comparison-table tbody th a:hover { text-decoration: underline; }
.clients-comparison-table tbody tr:hover th a { text-decoration: underline; }
.clients-comparison-table tbody tr:hover td { position: relative; }
.clients-comparison-table tbody tr:hover td::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.25); }

.client-tags { list-style: none; font-size: 0; }
.client-tags li { display: inline-block; font-size: 1rem; }
.client-tags a:hover, .client-tags a:focus, .client-tags a:active { outline-color: #fff; text-decoration: underline; }

.tag { display: inline-block; padding: 0.125rem 0.5rem; color: #fff; background-color: #838383; text-decoration: none; }

.tag-version { opacity: 0.75; }

body.light-mode a { color: #005A9C; }
body.light-mode a:hover { color: #004D85; }
body.light-mode p code { background-color: rgba(0, 0, 0, 0.05); color: #333333; }
body.light-mode a:active, body.light-mode a:focus { outline: 1px dotted rgba(0, 0, 0, 0.5); }
body.light-mode a:focus:not(:active) { outline: 0.1875rem solid #333; }
body.light-mode .feature, body.light-mode .post, body.light-mode .compare .filter, .compare body.light-mode .filter, body.light-mode .client { background: #ffffff; border: 1px solid #e0e0e0; }
body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4, body.light-mode h5, body.light-mode h6 { color: #333333; }
body.light-mode .filter h2.settings-title, body.light-mode .filter h2.compare-title { color: #fff; }
body.light-mode table { background: #ffffff; border-color: #e0e0e0; }
body.light-mode table th, body.light-mode table td { border-color: #e0e0e0; }
body.light-mode table thead { background: #f0f0f0; }
body.light-mode .header { background: #ffffff; border-bottom: 1px solid #e0e0e0; }
body.light-mode .footer { background: #ffffff; border-top: 1px solid #e0e0e0; }
body.light-mode .search-input { background: #ffffff; border: 1px solid #e0e0e0; color: #333333; }
body.light-mode .search-input::placeholder { color: #666666; }
body.light-mode .search-category-button { background-color: #ffffff; }
body.light-mode .list-item { background: #ffffff; border: 1px solid #e0e0e0; }
body.light-mode .main { background: #ffffff; }
body.light-mode .tab.current, body.light-mode .tab:not(.current):focus, body.light-mode .tab:not(.current):hover { color: #fff; }
body.light-mode .clients-comparison-table tbody > tr > th { background-color: #ffffff; color: #333333; }
body.light-mode .clients-comparison-table tbody > tr > th a { color: #333333; }
body.light-mode .clients-comparison-table tbody td, body.light-mode .clients-comparison-table thead td { background-color: #ffffff; color: #333333; }
body.light-mode .clients-comparison-table .data-family-name { color: #333333; }
body.light-mode .post--client .post-title .client-name { color: #333333 !important; }

.block:not(:last-child) { margin-bottom: 2rem; }

@media (min-width: 32rem) { .homepage { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; } }
@media (max-width: 30rem) { .homepage .score-text { margin-left: 1.5rem; margin-top: 0.25rem; margin-bottom: 0.5rem; } }
.homepage .button { margin-top: 0.75rem; }

.about-button { text-align: center; display: block; margin: auto; color: white; cursor: pointer; }

.intro-tagline { max-width: 44rem; margin: 0 auto 1rem; text-align: center; font-size: 1.125rem; font-weight: 300; }

.explore { margin: 2rem 0; }

.explore-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; grid-gap: 1rem; }
@media (min-width: 32rem) { .explore-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .explore-cards { grid-template-columns: repeat(4, 1fr); } }

.explore-card { display: flex; flex-direction: column; height: 100%; padding: 1.25rem; border: 1px solid #3c3c3d; background: #2a2a2e; border-radius: 0.25rem; color: inherit; text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
.explore-card:focus, .explore-card:hover { border-color: #67bfff; transform: translateY(-0.125rem); }

.explore-card-title { display: block; margin-bottom: 0.5rem; font-size: 1.125rem; font-weight: 400; color: #67bfff; }

.explore-card-text { display: block; font-size: 0.9375rem; line-height: 1.4; }

.recent { margin-top: 2rem; }

body.light-mode .explore-card { background: #ffffff; border-color: #e0e0e0; }
body.light-mode .explore-card-title { color: #005A9C; }

.list--features { column-count: 3; column-width: 20rem; column-gap: 1rem; }
.list--features + .list-title { margin-top: 3rem; }

.post, .compare .filter { padding: 2rem 1rem; border: 1px solid #3c3c3d; background: #2a2a2e; }

.post-inside { max-width: 44rem; margin: 0 auto; }

.post-feature { margin: 1.5rem; margin-bottom: 3rem; }
@media screen and (max-width: 900px) { .post-feature { margin: 0; margin-bottom: 3rem; } }

.post-date { color: #fff; }

.post-title { border-left: 3px solid #fff; padding-left: 1rem; margin-left: -1rem; }

.post .post-inside > *:not(:last-child), .compare .filter .post-inside > *:not(:last-child) { margin-bottom: 1.5rem; }
.post a, .compare .filter a { color: inherit; }
.post h1, .compare .filter h1 { color: #fff; }
.post ul, .compare .filter ul, .post ol, .compare .filter ol { margin-left: 3rem; }
.post li:not(:last-child), .compare .filter li:not(:last-child) { margin-bottom: 0.75rem; }
.post img, .compare .filter img { display: block; max-width: 100%; height: auto; }
.post blockquote, .compare .filter blockquote { font-style: italic; padding-left: 1rem; border-left: 1px solid currentcolor; }

.page--news .post .list a, .page--news .compare .filter .list a, .compare .page--news .filter .list a { text-decoration: underline; }
.page--news .post .list a:focus, .page--news .compare .filter .list a:focus, .compare .page--news .filter .list a:focus, .page--news .post .list a:hover, .page--news .compare .filter .list a:hover, .compare .page--news .filter .list a:hover { color: #fff; }

.page--clients .post .list li > a, .page--clients .compare .filter .list li > a, .compare .page--clients .filter .list li > a { color: #fff; }
.page--clients .post .list li > small, .page--clients .compare .filter .list li > small, .compare .page--clients .filter .list li > small { word-wrap: break-word; }

.post--client { margin-top: 1rem; scroll-margin-top: 1rem; }
.post--client ul.client-tags { margin: 0; }
.post--client ul.client-tags a { color: #fff; }
.post--client ul.client-tags li { margin: 0 0.25rem 0.25rem 0; }
.post--client > .post-title { margin-left: 0; margin-bottom: 2rem; }
.post--client .post-title .client-name { color: #fff; }
.post--client .list-title { color: #fff; border-bottom: none; }

.feature { position: relative; padding: 1rem 2rem 0; background-color: #2a2a2e; }

.feature-title { color: #eee; font-size: 2rem; }
.feature-title a { color: inherit; text-decoration: none; word-wrap: break-word; }

.baseline a { text-decoration: none; color: inherit; }

.feature-permalink { position: absolute; left: 0rem; top: 1.25rem; display: flex; align-items: center; justify-content: center; padding: 0.25em 0.75em; width: 2.5rem; height: 2.5rem; color: #fff; font-weight: 300; font-size: 1.25rem; text-decoration: none; background-color: #005A9C; }
.feature-permalink:focus, .feature-permalink:hover { background-color: #204e8a; }
@media only screen and (min-width: 85rem) { .feature-permalink { left: -2.5rem; } }

.feature-header { margin-bottom: 1rem; }
@media only screen and (min-width: 64rem) { .feature-header { display: flex; flex-wrap: wrap; min-height: 4rem; }
  .feature-header > .feature-header-column { width: 100%; }
  .feature-header > .feature-header-column:nth-child(2) { display: flex; flex-direction: row; justify-content: flex-end; } }
.feature-header .legend-list { min-width: 10.5rem; }
.feature-header .legend-list span { margin-right: 0.5rem; }

.feature-description { font-size: 1.25rem; }
.feature-description > p { margin-top: 1.5rem; }
.feature-description > p a { color: inherit; }
.feature-description code { color: #eee; font-size: 1em; }

.feature-support { margin-top: 0.5rem; }
@media only screen and (min-width: 48rem) { .feature-support { min-width: 17.5rem; } }

.feature-support-title { margin-bottom: 0.75rem; color: #fff; font-size: 1rem; }
.feature-support-title a { font-size: 0.75rem; color: #b1b1b3; text-decoration: underline; }

.feature-support-about { margin-bottom: 0.75rem; }

.feature-support-summary { color: #fff; }

.feature-support-summary-value { display: inline-block; padding: 0 0.25em; line-height: 1.375em; border-radius: 0.125rem; }

.feature-support-legend { font-size: 0.75rem; }
.feature-support-legend a { color: inherit; text-decoration: underline; }

.feature-support .score { margin-bottom: 0.75rem; }

.feature-support .score > div { position: relative; cursor: help; }
.feature-support .score > div:focus::before, .feature-support .score > div:hover::before { content: ''; display: block; position: absolute; left: -2px; right: -2px; top: -2px; bottom: -2px; border: 2px solid #1b1b1d; outline: 1px solid #fff; z-index: 1; }
.feature-support .score > div:focus::after, .feature-support .score > div:hover::after { content: attr(title); position: absolute; z-index: 2; top: 1.25rem; bottom: auto; right: 0.5rem; padding: 0.5rem; min-width: 6rem; max-width: calc(100% - 2rem); font-size: 0.75rem; line-height: 1.25; color: rgba(255, 255, 255, 0.85); background: #2a2a2e; border: 1px solid #3c3c3d; border-radius: 0.25rem; box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.5); }
.feature-support .score > div:not(.unknown) { flex-grow: 0; }

.y, .supported { background-color: #39b54a !important; }

.n, .unsupported { background-color: #c44230 !important; }

.a, .mitigated { background-color: #eda745 !important; }

.partially-header { color: #eda745 !important; }

.score .mitigated { background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0.25) 4px, rgba(255, 255, 255, 0.25) 6px); }

.u, .unknown { background-color: #838383 !important; }

.m, .mixed { background-color: #4096ed !important; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 6px, rgba(255, 255, 255, 0.25) 6px, rgba(255, 255, 255, 0.25) 8px); }

.accessible-colors-enabled .supported { color: #000; background-color: #a6edb2 !important; }
.accessible-colors-enabled .unsupported { background-color: #842e98 !important; }
.accessible-colors-enabled .mitigated { color: #000; background-color: #8090f9 !important; }
.accessible-colors-enabled .mixed { background-color: #554800 !important; }

.data-details { position: relative; min-height: 12.675rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding: 1.2rem; }
@media screen and (max-width: 900px) { .data-details { padding: 0; } }

.data-details > p { margin-bottom: 1rem; }

.filters { position: relative; z-index: 1; display: flex; margin-bottom: -1rem; }
.filters[hidden] { visibility: hidden; }

.filter-button { display: inline-block; min-height: 2rem; padding: 0.25rem 1rem; color: #fff; font-size: 1rem; text-decoration: none; text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); background-color: #1b1b1d; cursor: pointer; outline: none; }
.filter-button:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.filter-button:first-child:not(:last-child) { margin-right: -1px; }
.filter-button:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.filter-button::-moz-focus-inner { border: none; }
.filter-button:focus { position: relative; z-index: 2; border-color: #fff; }

.filter-button--active { background-color: #005A9C; }

/* Data */
.data-family-list { display: inline-flex; flex-direction: column; gap: 1rem; justify-content: flex-start; padding-left: 1rem; padding-right: 1rem; width: 100%; }
@media screen and (min-width: 900px) { .data-family-list.no-behaviour { flex-direction: row; } }

.data-family { position: relative; display: flex; flex-direction: column; flex-grow: 1; padding: 2rem 0.25rem; flex-basis: 100%; }
.data-family.selected::before { content: ''; display: block; position: absolute; left: 0; right: 0; top: 1rem; bottom: 1.5rem; z-index: 1; border: 1px solid #fff; background: rgba(255, 255, 255, 0.025); }

.data-family-name { display: flex; justify-content: center; align-items: flex-start; margin: 0 0.25rem; padding: 0 1rem; color: rgba(255, 255, 255, 0.85); font-size: 1.375rem; text-align: left; }
.data-family-name span { position: -webkit-sticky; position: sticky; left: 0.5rem; right: 0.5rem; }
.data-family-name span a { color: inherit; text-decoration: none; }
.data-family-name span a:hover, .data-family-name span a:focus { text-decoration: underline; }

.data-family-description { padding: 1rem; font-size: 1.25rem; }

.data-family--thunderbird .data-family-name { max-width: 6.25rem; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; }

.data-platform-name { display: flex; align-items: flex-end; justify-content: center; min-height: 2.8rem; padding: 0.5rem; font-size: 0.75rem; font-weight: normal; line-height: 1.2; text-align: center; }
.data-platform-name a { color: inherit; text-decoration: none; }
.data-platform-name a:hover, .data-platform-name a:focus { text-decoration: underline; }

.data-client-list { display: flex; flex-direction: row; flex-grow: 1; }

.data-client { display: flex; flex-direction: column; flex-grow: 1; margin: 0 0.25rem; width: 6.5rem; }

.data-versions-list { position: relative; display: flex; flex-direction: column; flex-grow: 1; }
.data-versions-list::before { content: ''; flex-grow: 1; background: rgba(255, 255, 255, 0.05); }
.data-versions-list::after { content: ''; position: absolute; left: -0.5rem; right: -0.5rem; bottom: -0.5rem; height: 3rem; background: #111; }

.data-version { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; flex-grow: 0; padding: 0 1rem; height: 2rem; color: #fff; }
.data-version:not(:first-child) { margin-top: 0.5rem; }
.data-version:last-child { margin-top: 0.75rem; }

.data-version-number { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.data-version-badge { position: absolute; right: -0.25rem; top: -0.25rem; display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; font-size: 1rem; }
.data-version-badge.supported::before { content: '\2714\FE0E'; }
.data-version-badge.unsupported::before { content: '\2717\FE0E'; }
.data-version-badge.mitigated::before { content: '~'; }
.data-version-badge.unknown { opacity: 0; }

.hint-tracker { padding: 0.75rem 2rem; font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.7); border-top: 1px solid #3c3c3d; }
.hint-tracker a { color: inherit; text-decoration: underline; }
.hint-tracker a:hover, .hint-tracker a:focus { color: #fff; }

.data-version-notes { position: absolute; left: 0; top: 0; display: flex; flex-direction: row; }
.data-version-notes > a { display: flex; justify-content: center; align-items: center; min-width: 0.75rem; height: 0.75rem; color: #333; font-size: 0.625rem; line-height: 1; text-decoration: none; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.8); }
.data-version-notes > a:hover { background-color: rgba(255, 255, 255, 0.8); }
.data-version-notes > a:not(:last-child) { border-right: none; }

.empty-message { padding: 1rem; flex-direction: column; flex-grow: 1; align-items: center; justify-content: center; min-height: 12.55rem; text-align: center; }
.empty-message:not([hidden]) { display: flex; }
.empty-message .i { display: block; margin: 0 0 0.5rem; font-size: 4rem; }

/* Footer */
.feature-footer { margin: 0 -2rem; min-height: 1rem; }
.feature-footer a { color: inherit; }
.feature-footer p:not(:last-child) { margin-bottom: 1rem; }
.feature-footer > * { padding: 2rem; }
.feature-footer > .data-notes { border-bottom: 1px solid #3c3c3d; }
.feature-footer img { max-width: 100%; margin-top: 1rem; height: 2rem; filter: invert(1); display: block; }
@media only screen and (min-width: 64rem) { .feature-footer { display: flex; flex-wrap: wrap; }
  .feature-footer > .data-contribute, .feature-footer > .data-test { width: 50%; }
  .feature-footer > .data-contribute { border-right: 1px solid #3c3c3d; }
  .feature-footer > .data-notes { width: 100%; } }

/* Notes */
.data-notes-list { position: relative; list-style: none; margin-left: -0.25rem; padding-left: 2.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; margin-bottom: 1rem; overflow: hidden; }

.data-notes .list a { text-decoration: underline; }
.data-notes .list a:focus, .data-notes .list a:hover { color: #fff; }

.data-note { position: relative; float: left; clear: left; scroll-margin-top: 1.5rem; }
.data-note:not(:last-child) { margin-bottom: 0.5rem; }
.data-note p { display: inline; }
.data-note:target::before { content: ''; display: block; position: absolute; z-index: -1; left: -2.75rem; right: -0.5rem; top: -0.25rem; bottom: -0.25rem; background: rgba(255, 255, 255, 0.2); }

.note-tags { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.note-tags .tag { font-size: 0.875rem; }

.data-note-key { display: flex; justify-content: center; align-items: center; position: absolute; left: -2.25rem; top: 0; font-size: 0.75rem; width: 1.5rem; height: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.2); }

.feature-footer p.github-edit-link { margin-bottom: 2rem; }

.search-results ~ * { display: none; }
.search-results .feature { margin-bottom: 2rem; }
.search-results .feature .data-contribute, .search-results .feature .data-test { display: none; }
.search-results .feature .feature-footer > .data-notes { border-bottom: none; }
.search-results .feature .feature-title { padding-left: 1.5rem; }
@media only screen and (min-width: 85rem) { .search-results .feature .feature-title { padding-left: 0; } }

.show-more-visible { padding: 0.5em; min-height: 2.5rem; color: #fff; font-weight: 300; font-size: 1.25rem; text-decoration: none; white-space: nowrap; display: block; text-transform: capitalize; background-color: #003E6B; cursor: pointer; border: none; }
.show-more-visible:hover { filter: brightness(120%); }

.invisible { display: none; }

.feature--placeholder .data { min-height: 10.5rem; }
.feature--placeholder .data-summary-cell { margin-top: 3.375rem; opacity: 0.125; }
.feature--placeholder .data-details { min-height: 23.125rem; }
.feature--placeholder .feature-footer { min-height: 3rem; }