/* bitboinc 8-bit layer.
   Loaded AFTER bitboinc.css (GLOBAL_HEAD_EXTRA in project.inc), so it only restyles: pixel font for headings, notched "pixel" borders instead of rounded
   ones, hard button shadows, canvas-painted pixel-art night-sky scenes for the banner and the footer (see bitboinc-8bit.js), a rocket back-to-top button and an extra "Arcade" theme
   (PICO-8 palette, CRT scanlines). Everything decorative is aria-hidden and switched off under prefers-reduced-motion.
   Generated by site8bit/build.py from this template (the sprites are inline SVG, no extra requests); edit the template, not the output. */

@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/px8/pixelify-latinext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/px8/pixelify-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --px-font: "Pixelify Sans", "Segoe UI", system-ui, sans-serif;
  --px-edge: var(--border);
  --px-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='2' height='1' fill='%23a16cdd'/%3E%3Crect x='3' y='1' width='2' height='1' fill='%23a16cdd'/%3E%3Crect x='0' y='2' width='8' height='1' fill='%23a16cdd'/%3E%3Crect x='1' y='3' width='6' height='1' fill='%23a16cdd'/%3E%3Crect x='2' y='4' width='4' height='1' fill='%23a16cdd'/%3E%3Crect x='1' y='5' width='6' height='1' fill='%23a16cdd'/%3E%3Crect x='1' y='6' width='2' height='1' fill='%23a16cdd'/%3E%3Crect x='5' y='6' width='2' height='1' fill='%23a16cdd'/%3E%3Crect x='0' y='7' width='2' height='1' fill='%23a16cdd'/%3E%3Crect x='6' y='7' width='2' height='1' fill='%23a16cdd'/%3E%3C/svg%3E");
  --px-rocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='26' viewBox='0 0 8 13' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='2' height='1' fill='%23ff4d6d'/%3E%3Crect x='2' y='1' width='4' height='1' fill='%23ff4d6d'/%3E%3Crect x='2' y='2' width='4' height='1' fill='%23e9e9f6'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23e9e9f6'/%3E%3Crect x='3' y='3' width='2' height='1' fill='%235cb8ff'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%23e9e9f6'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23e9e9f6'/%3E%3Crect x='3' y='4' width='2' height='1' fill='%235cb8ff'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%23e9e9f6'/%3E%3Crect x='2' y='5' width='4' height='1' fill='%23e9e9f6'/%3E%3Crect x='1' y='6' width='6' height='1' fill='%23e9e9f6'/%3E%3Crect x='0' y='7' width='8' height='1' fill='%23e9e9f6'/%3E%3Crect x='0' y='8' width='2' height='1' fill='%23e9e9f6'/%3E%3Crect x='3' y='8' width='2' height='1' fill='%23e9e9f6'/%3E%3Crect x='6' y='8' width='2' height='1' fill='%23e9e9f6'/%3E%3Crect x='0' y='9' width='2' height='1' fill='%23ff4d6d'/%3E%3Crect x='3' y='9' width='2' height='1' fill='%23e9e9f6'/%3E%3Crect x='6' y='9' width='2' height='1' fill='%23ff4d6d'/%3E%3Crect x='3' y='10' width='2' height='1' fill='%237630cf'/%3E%3Crect x='2' y='11' width='1' height='1' fill='%237630cf'/%3E%3Crect x='3' y='11' width='2' height='1' fill='%23b283e2'/%3E%3Crect x='5' y='11' width='1' height='1' fill='%237630cf'/%3E%3Crect x='3' y='12' width='2' height='1' fill='%23b283e2'/%3E%3C/svg%3E");
  --px-starfield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 120 120' shape-rendering='crispEdges'%3E%3Crect x='85' y='5' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='28' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='79' y='7' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='116' y='7' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='46' y='12' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='28' y='15' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='50' y='19' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='13' y='23' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='4' y='27' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='11' y='30' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='91' y='36' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='53' y='37' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='71' y='39' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='88' y='43' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='38' y='46' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='12' y='47' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='54' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='99' y='54' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='53' y='55' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='74' y='59' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='89' y='60' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='87' y='63' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='112' y='63' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='53' y='65' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='15' y='69' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='109' y='71' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='38' y='73' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='74' y='73' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='81' y='73' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='87' y='73' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='63' y='76' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='77' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='74' y='80' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='39' y='89' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='8' y='91' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='57' y='93' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='43' y='96' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='71' y='97' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='31' y='99' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='23' y='101' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='112' y='101' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='58' y='102' width='1' height='1' fill='%23cbb2ed'/%3E%3Crect x='11' y='107' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='62' y='119' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E");
  --px-p-mars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='4' height='1' fill='%23d9573a'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23d9573a'/%3E%3Crect x='1' y='2' width='2' height='1' fill='%23d9573a'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23b8472f'/%3E%3Crect x='4' y='2' width='5' height='1' fill='%23d9573a'/%3E%3Crect x='0' y='3' width='2' height='1' fill='%23d9573a'/%3E%3Crect x='2' y='3' width='3' height='1' fill='%23b8472f'/%3E%3Crect x='5' y='3' width='5' height='1' fill='%23d9573a'/%3E%3Crect x='0' y='4' width='3' height='1' fill='%23d9573a'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%23b8472f'/%3E%3Crect x='4' y='4' width='6' height='1' fill='%23d9573a'/%3E%3Crect x='0' y='5' width='6' height='1' fill='%23d9573a'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%23b8472f'/%3E%3Crect x='7' y='5' width='2' height='1' fill='%23d9573a'/%3E%3Crect x='9' y='5' width='1' height='1' fill='%239c3a28'/%3E%3Crect x='0' y='6' width='5' height='1' fill='%23d9573a'/%3E%3Crect x='5' y='6' width='3' height='1' fill='%23b8472f'/%3E%3Crect x='8' y='6' width='2' height='1' fill='%239c3a28'/%3E%3Crect x='1' y='7' width='5' height='1' fill='%23d9573a'/%3E%3Crect x='6' y='7' width='1' height='1' fill='%23b8472f'/%3E%3Crect x='7' y='7' width='2' height='1' fill='%239c3a28'/%3E%3Crect x='2' y='8' width='4' height='1' fill='%23d9573a'/%3E%3Crect x='6' y='8' width='2' height='1' fill='%239c3a28'/%3E%3Crect x='3' y='9' width='2' height='1' fill='%23d9573a'/%3E%3Crect x='5' y='9' width='2' height='1' fill='%239c3a28'/%3E%3C/svg%3E");
  --px-p-earth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='4' height='1' fill='%233f86e8'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%233f86e8'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%2358b85a'/%3E%3Crect x='6' y='1' width='4' height='1' fill='%233f86e8'/%3E%3Crect x='1' y='2' width='2' height='1' fill='%233f86e8'/%3E%3Crect x='3' y='2' width='3' height='1' fill='%2358b85a'/%3E%3Crect x='6' y='2' width='2' height='1' fill='%23f2f6ff'/%3E%3Crect x='8' y='2' width='3' height='1' fill='%233f86e8'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%233f86e8'/%3E%3Crect x='2' y='3' width='4' height='1' fill='%2358b85a'/%3E%3Crect x='6' y='3' width='5' height='1' fill='%233f86e8'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233f86e8'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%2358b85a'/%3E%3Crect x='6' y='4' width='6' height='1' fill='%233f86e8'/%3E%3Crect x='0' y='5' width='2' height='1' fill='%233f86e8'/%3E%3Crect x='2' y='5' width='3' height='1' fill='%2358b85a'/%3E%3Crect x='5' y='5' width='3' height='1' fill='%233f86e8'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%2358b85a'/%3E%3Crect x='9' y='5' width='3' height='1' fill='%233f86e8'/%3E%3Crect x='0' y='6' width='3' height='1' fill='%233f86e8'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%2358b85a'/%3E%3Crect x='4' y='6' width='3' height='1' fill='%233f86e8'/%3E%3Crect x='7' y='6' width='3' height='1' fill='%2358b85a'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%233f86e8'/%3E%3Crect x='11' y='6' width='1' height='1' fill='%232a5db0'/%3E%3Crect x='0' y='7' width='6' height='1' fill='%233f86e8'/%3E%3Crect x='6' y='7' width='4' height='1' fill='%2358b85a'/%3E%3Crect x='10' y='7' width='1' height='1' fill='%233d8a40'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%232a5db0'/%3E%3Crect x='1' y='8' width='6' height='1' fill='%233f86e8'/%3E%3Crect x='7' y='8' width='2' height='1' fill='%2358b85a'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%233d8a40'/%3E%3Crect x='10' y='8' width='1' height='1' fill='%232a5db0'/%3E%3Crect x='1' y='9' width='7' height='1' fill='%233f86e8'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%233d8a40'/%3E%3Crect x='9' y='9' width='2' height='1' fill='%232a5db0'/%3E%3Crect x='2' y='10' width='5' height='1' fill='%233f86e8'/%3E%3Crect x='7' y='10' width='3' height='1' fill='%232a5db0'/%3E%3Crect x='4' y='11' width='2' height='1' fill='%233f86e8'/%3E%3Crect x='6' y='11' width='2' height='1' fill='%232a5db0'/%3E%3C/svg%3E");
  --px-p-jupiter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='5' y='0' width='4' height='1' fill='%23b8a0d8'/%3E%3Crect x='3' y='1' width='8' height='1' fill='%23b8a0d8'/%3E%3Crect x='2' y='2' width='10' height='1' fill='%23b8a0d8'/%3E%3Crect x='1' y='3' width='12' height='1' fill='%23b8a0d8'/%3E%3Crect x='1' y='4' width='12' height='1' fill='%238569b2'/%3E%3Crect x='0' y='5' width='14' height='1' fill='%238569b2'/%3E%3Crect x='0' y='6' width='13' height='1' fill='%23b8a0d8'/%3E%3Crect x='13' y='6' width='1' height='1' fill='%238f79ae'/%3E%3Crect x='0' y='7' width='12' height='1' fill='%23b8a0d8'/%3E%3Crect x='12' y='7' width='2' height='1' fill='%238f79ae'/%3E%3Crect x='0' y='8' width='11' height='1' fill='%23d2c1e7'/%3E%3Crect x='11' y='8' width='3' height='1' fill='%23aa98c1'/%3E%3Crect x='1' y='9' width='9' height='1' fill='%23d2c1e7'/%3E%3Crect x='10' y='9' width='3' height='1' fill='%23aa98c1'/%3E%3Crect x='1' y='10' width='8' height='1' fill='%23b8a0d8'/%3E%3Crect x='9' y='10' width='4' height='1' fill='%238f79ae'/%3E%3Crect x='2' y='11' width='6' height='1' fill='%23b8a0d8'/%3E%3Crect x='8' y='11' width='4' height='1' fill='%238f79ae'/%3E%3Crect x='3' y='12' width='4' height='1' fill='%23b8a0d8'/%3E%3Crect x='7' y='12' width='4' height='1' fill='%238f79ae'/%3E%3Crect x='5' y='13' width='1' height='1' fill='%23b8a0d8'/%3E%3Crect x='6' y='13' width='3' height='1' fill='%238f79ae'/%3E%3C/svg%3E");
  --px-p-neptune: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='3' height='1' fill='%235aa8e8'/%3E%3Crect x='1' y='1' width='7' height='1' fill='%235aa8e8'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%235aa8e8'/%3E%3Crect x='0' y='3' width='9' height='1' fill='%235aa8e8'/%3E%3Crect x='0' y='4' width='8' height='1' fill='%237cc2f5'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%235a9ad0'/%3E%3Crect x='0' y='5' width='7' height='1' fill='%235aa8e8'/%3E%3Crect x='7' y='5' width='2' height='1' fill='%233b78b8'/%3E%3Crect x='1' y='6' width='5' height='1' fill='%235aa8e8'/%3E%3Crect x='6' y='6' width='2' height='1' fill='%233b78b8'/%3E%3Crect x='1' y='7' width='4' height='1' fill='%235aa8e8'/%3E%3Crect x='5' y='7' width='3' height='1' fill='%233b78b8'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%235aa8e8'/%3E%3Crect x='4' y='8' width='2' height='1' fill='%233b78b8'/%3E%3C/svg%3E");
  --px-p-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='4' height='1' fill='%23d9dbe6'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23d9dbe6'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%239a9db0'/%3E%3Crect x='3' y='1' width='4' height='1' fill='%23d9dbe6'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%23d9dbe6'/%3E%3Crect x='1' y='2' width='3' height='1' fill='%239a9db0'/%3E%3Crect x='4' y='2' width='4' height='1' fill='%23d9dbe6'/%3E%3Crect x='0' y='3' width='2' height='1' fill='%23d9dbe6'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%239a9db0'/%3E%3Crect x='3' y='3' width='5' height='1' fill='%23d9dbe6'/%3E%3Crect x='0' y='4' width='5' height='1' fill='%23d9dbe6'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%239a9db0'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%23d9dbe6'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23a3a6b8'/%3E%3Crect x='0' y='5' width='4' height='1' fill='%23d9dbe6'/%3E%3Crect x='4' y='5' width='3' height='1' fill='%239a9db0'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%23a3a6b8'/%3E%3Crect x='1' y='6' width='4' height='1' fill='%23d9dbe6'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%239a9db0'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23a3a6b8'/%3E%3Crect x='2' y='7' width='2' height='1' fill='%23d9dbe6'/%3E%3Crect x='4' y='7' width='2' height='1' fill='%23a3a6b8'/%3E%3C/svg%3E");
  --px-p-saturn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 16 8' shape-rendering='crispEdges'%3E%3Crect x='6' y='0' width='4' height='1' fill='%23c2aae0'/%3E%3Crect x='5' y='1' width='6' height='1' fill='%23c2aae0'/%3E%3Crect x='4' y='2' width='8' height='1' fill='%23c2aae0'/%3E%3Crect x='1' y='3' width='3' height='1' fill='%2386749c'/%3E%3Crect x='4' y='3' width='8' height='1' fill='%23a58ac7'/%3E%3Crect x='12' y='3' width='3' height='1' fill='%2386749c'/%3E%3Crect x='0' y='4' width='2' height='1' fill='%23ded1ed'/%3E%3Crect x='4' y='4' width='7' height='1' fill='%23a58ac7'/%3E%3Crect x='11' y='4' width='1' height='1' fill='%2381699f'/%3E%3Crect x='14' y='4' width='2' height='1' fill='%23ded1ed'/%3E%3Crect x='1' y='5' width='3' height='1' fill='%23ded1ed'/%3E%3Crect x='4' y='5' width='6' height='1' fill='%23c2aae0'/%3E%3Crect x='10' y='5' width='2' height='1' fill='%23967cb7'/%3E%3Crect x='12' y='5' width='3' height='1' fill='%23ded1ed'/%3E%3Crect x='5' y='6' width='4' height='1' fill='%23c2aae0'/%3E%3Crect x='9' y='6' width='2' height='1' fill='%23967cb7'/%3E%3Crect x='6' y='7' width='2' height='1' fill='%23c2aae0'/%3E%3Crect x='8' y='7' width='2' height='1' fill='%23967cb7'/%3E%3C/svg%3E");
  --px-p-bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='10' viewBox='0 0 11 5' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='3' height='1' fill='%23c2aae0'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%2386749c'/%3E%3Crect x='3' y='1' width='5' height='1' fill='%23c2aae0'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%2386749c'/%3E%3Crect x='0' y='2' width='2' height='1' fill='%2386749c'/%3E%3Crect x='3' y='2' width='5' height='1' fill='%23c2aae0'/%3E%3Crect x='9' y='2' width='2' height='1' fill='%2386749c'/%3E%3Crect x='0' y='3' width='2' height='1' fill='%23ded1ed'/%3E%3Crect x='3' y='3' width='4' height='1' fill='%23c2aae0'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23967cb7'/%3E%3Crect x='9' y='3' width='2' height='1' fill='%23ded1ed'/%3E%3Crect x='2' y='4' width='7' height='1' fill='%23ded1ed'/%3E%3C/svg%3E");
  --px-p-comet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 11 6' shape-rendering='crispEdges'%3E%3Crect x='7' y='1' width='2' height='1' fill='%23e1cff4'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%238fb4ff'/%3E%3Crect x='6' y='2' width='4' height='1' fill='%23e1cff4'/%3E%3Crect x='1' y='3' width='3' height='1' fill='%238fb4ff'/%3E%3Crect x='6' y='3' width='4' height='1' fill='%23e1cff4'/%3E%3Crect x='0' y='4' width='2' height='1' fill='%238fb4ff'/%3E%3Crect x='7' y='4' width='2' height='1' fill='%23e1cff4'/%3E%3C/svg%3E");
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root { --px-edge: color-mix(in srgb, var(--accent) 38%, var(--border)); }
}

/* ---------- type ----------
   The pixel font is used only for headings, the brand and panel titles. Table headers, buttons, labels, badges, tabs and menus keep the normal
   font: small pixel text is hard to read. No text shadows on running titles (they blur the glyph edges). */

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .panel-heading, .panel-title, .navbar-brand, .bitboinc-banner-title, legend {
  font-family: var(--px-font) !important;
  font-weight: 600;
  letter-spacing: .01em;
  text-rendering: optimizeSpeed;
}
h1, .h1 { font-size: 2.1rem; line-height: 1.25; }
h2, .h2 { font-size: 1.7rem; line-height: 1.3; }
h3, .h3 { font-size: 1.4rem; line-height: 1.3; }
h4, .h4, .panel-heading, .panel-title { font-size: 1.28rem; }
.panel-heading, .panel-heading * { font-family: var(--px-font) !important; }
.panel-heading a, .panel-heading small { font-family: inherit; }
.table > thead > tr > th { font-weight: 700; }
.bitboinc-banner-title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--accent-hi) !important;
  -webkit-text-fill-color: var(--accent-hi) !important;
  font-size: 3rem !important;
  letter-spacing: .04em;
  text-shadow: 3px 3px 0 rgba(20, 10, 0, .85);
  z-index: 2;
}
hr {
  border: 0 !important;
  height: 3px;
  margin: 20px 0;
  background: repeating-linear-gradient(90deg, var(--px-edge) 0 6px, transparent 6px 12px);
}
.lead { margin-bottom: 18px; }
a:hover, a:focus { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }

/* tables inside a ".table" box (server status, stats): Bootstrap paints the inner table white, which makes light text on dark themes unreadable */
.table .table, .table > tbody > tr > td > .table { background-color: transparent !important; }
.table, .table > tbody > tr, .table > tbody > tr > td { color: inherit; }
.table > tbody > tr > td, .table > tbody > tr > th { border-top-color: var(--px-edge); }

/* ---------- pixel borders: a notched box made of four hard shadows ---------- */

.navbar, .navbar-default, .navbar-inverse {
  border: 0 !important;
  border-radius: 0 !important;
  margin: 4px 4px 26px !important;
  box-shadow: 0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent), -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent) !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a {
  box-shadow: inset 0 -4px 0 0 var(--accent);
}
.dropdown-menu {
  border: 0 !important;
  border-radius: 0 !important;
  margin-top: 8px !important;
  box-shadow: 0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent), -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent), 6px 6px 0 0 rgba(0, 0, 0, .25);
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--accent-soft) !important; box-shadow: inset 4px 0 0 0 var(--accent); }

.panel, .well, .alert, .thumbnail, .list-group, .modal-content, .jumbotron {
  border: 0 !important;
  border-radius: 0 !important;
  margin: 8px 4px 22px;
  box-shadow: 0 -2px 0 0 var(--px-edge), 0 2px 0 0 var(--px-edge), -2px 0 0 0 var(--px-edge), 2px 0 0 0 var(--px-edge) !important;
}
.panel .panel, .panel .well, .well .panel { margin: 6px 2px 14px; }
.panel-heading {
  border-radius: 0 !important;
  border-bottom: 2px solid var(--px-edge) !important;
}
.panel-heading::before { content: none; }
.panel-body, .list-group-item { border-radius: 0 !important; }

.btn {
  border: 0 !important;
  border-radius: 0 !important;
  font-weight: 600;
  position: relative;
  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, .45), 0 2px 0 0 rgba(0, 0, 0, .45), -2px 0 0 0 rgba(0, 0, 0, .45), 2px 0 0 0 rgba(0, 0, 0, .45),
              inset 2px 2px 0 0 rgba(255, 255, 255, .20), inset -2px -2px 0 0 rgba(0, 0, 0, .16) !important;
  transition: none;
}
.btn:active, .btn.active {
  transform: translateY(2px);
  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, .45), 0 2px 0 0 rgba(0, 0, 0, .45), -2px 0 0 0 rgba(0, 0, 0, .45), 2px 0 0 0 rgba(0, 0, 0, .45),
              inset 2px 2px 0 0 rgba(0, 0, 0, .18), inset -2px -2px 0 0 rgba(255, 255, 255, .16) !important;
}
.btn:focus-visible { outline: 3px dashed var(--accent-hi); outline-offset: 4px; }
.label, .badge { border-radius: 0 !important; font-weight: 700; letter-spacing: .01em; }
.form-control, .input-group-addon, select, textarea {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 -2px 0 0 var(--px-edge), 0 2px 0 0 var(--px-edge), -2px 0 0 0 var(--px-edge), 2px 0 0 0 var(--px-edge), inset 3px 3px 0 0 rgba(0, 0, 0, .08) !important;
}
.form-control:focus {
  box-shadow: 0 -2px 0 0 var(--accent), 0 2px 0 0 var(--accent), -2px 0 0 0 var(--accent), 2px 0 0 0 var(--accent), inset 3px 3px 0 0 rgba(0, 0, 0, .08) !important;
}
.pagination > li > a, .pagination > li > span { border-radius: 0 !important; }
.progress, .progress-bar { border-radius: 0 !important; }
.table { border-collapse: separate; }
.bitboinc-level-badge { border-radius: 0; font-size: 13px; font-weight: 700; letter-spacing: 0; box-shadow: 0 -2px 0 0 rgba(0,0,0,.4), 0 2px 0 0 rgba(0,0,0,.4), -2px 0 0 0 rgba(0,0,0,.4), 2px 0 0 0 rgba(0,0,0,.4); }

/* pixel scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg-alt); }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: var(--accent); border: 3px solid var(--bg-alt); border-radius: 0; }

/* ---------- banner + footer scenes (canvas, painted by bitboinc-8bit.js) ---------- */

.bitboinc-banner-wrap { margin: 6px 4px 24px; position: relative; }
.px-banner-on .bitboinc-banner { display: none !important; }
.px-scene-box {
  position: relative;
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
  background: #0e1540;
  box-shadow: 0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent), -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent);
}
.px-scene-box canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
}
/* the scene needs no lettering; the title stays in the page for screen readers only */
.px-banner-on .bitboinc-banner-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- rocket: back to top ---------- */

.px-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 36px;
  height: 58px;
  padding: 0;
  border: 0;
  background: var(--px-rocket) center / contain no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .35));
  z-index: 1030;
}
.px-top.on { opacity: 1; pointer-events: auto; }
.px-top:hover, .px-top:focus-visible { animation: px-bob .5s steps(2, end) infinite; }
.px-top.go { animation: px-launch .7s steps(10, end) forwards; }
@keyframes px-bob { 0% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes px-launch { to { transform: translateY(-120vh); } }

/* ---------- easter egg: confetti + toast ---------- */

.px-confetti {
  position: fixed;
  top: -12px;
  width: 8px;
  height: 8px;
  pointer-events: none;
  z-index: 2147483001;
  animation: px-fall var(--dur, 2.4s) steps(24, end) forwards;
}
@keyframes px-fall { to { transform: translate(var(--dx, 0px), 110vh); } }
.px-toast {
  position: fixed;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  padding: 14px 22px;
  background: #0b0d24;
  color: #e1cff4;
  font: 700 22px/1.2 var(--px-font);
  letter-spacing: .08em;
  text-shadow: 3px 3px 0 #7e2553;
  box-shadow: 0 -4px 0 0 #ff004d, 0 4px 0 0 #ff004d, -4px 0 0 0 #ff004d, 4px 0 0 0 #ff004d;
  z-index: 2147483002;
  animation: px-toast 3.2s steps(1, end) forwards;
}
@keyframes px-toast { 0%, 84% { opacity: 1; } 85%, 92% { opacity: 0; } 93%, 100% { opacity: 1; } }

/* ---------- extra theme: Arcade (PICO-8 palette) ---------- */

:root[data-theme="arcade"] {
  --bg: #0d1030; --bg-alt: #171d4a; --surface: #121741;
  --text: #e9e7f5; --text-muted: #aab0d4; --border: #2c3a7a;
  --brand-dark: #070920; --brand-dark-2: #1d2b53;
  --accent: #e8195a; --accent-hi: #ff6b9a; --accent-lo: #6cc4ff; --accent-soft: #28306a;
  --success: #3be07a; --danger: #ff4d6d; --warning: #a36cdd; --info: #6cc4ff;
  --px-edge: #34459a;
}
:root[data-theme="arcade"] body::before {
  content: "";
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .35;
  image-rendering: pixelated;
  background: var(--px-starfield) 0 0 / 480px 480px repeat;
}

:root[data-theme="arcade"] .px-top { filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .45)); }
:root[data-theme="arcade"] .table-striped > tbody > tr:nth-of-type(odd) { background: var(--bg-alt) !important; }
:root[data-theme="arcade"] .table-striped > tbody > tr:nth-of-type(even) { background: transparent !important; }
:root[data-theme="arcade"] .navbar a, :root[data-theme="arcade"] .navbar .navbar-brand, :root[data-theme="arcade"] .navbar .caret { color: #e9e7f5; }
:root[data-theme="arcade"] .navbar .caret { border-top-color: #e9e7f5; border-bottom-color: #e9e7f5; }
:root[data-theme="arcade"] .navbar .dropdown-menu { background: #121741; border: 2px solid var(--px-edge); border-radius: 0; box-shadow: 4px 6px 0 0 rgba(0, 0, 0, .35); }
:root[data-theme="arcade"] .navbar .dropdown-menu > li > a { color: #e9e7f5 !important; background: transparent; }
:root[data-theme="arcade"] .navbar .dropdown-menu > li > a:hover, :root[data-theme="arcade"] .navbar .dropdown-menu > li > a:focus { background: #e8195a !important; color: #fff !important; }
:root[data-theme="arcade"] .navbar .dropdown-menu .divider { background-color: var(--px-edge); }
:root[data-theme="arcade"] .navbar-nav > li > a, :root[data-theme="arcade"] .navbar-nav > .open > a, :root[data-theme="arcade"] .navbar-nav > .open > a:hover, :root[data-theme="arcade"] .navbar-nav > .open > a:focus, :root[data-theme="arcade"] .navbar-nav > .active > a { color: #e9e7f5 !important; }
:root[data-theme="arcade"] .navbar-nav > .open > a, :root[data-theme="arcade"] .navbar-nav > .open > a:hover, :root[data-theme="arcade"] .navbar-nav > .open > a:focus { background-color: #1d2b53 !important; }
:root[data-theme="arcade"] .navbar-nav > li > a:hover, :root[data-theme="arcade"] .navbar-nav > li > a:focus { background-color: #1d2b53 !important; color: #fff !important; }
:root[data-theme="arcade"] .label-warning, :root[data-theme="arcade"] .badge-warning { background-color: #6d4bb0; color: #fff; }
/* notice boxes: dark box with a coloured edge instead of a bright white/pastel block (too bright on the dark page) */
:root[data-theme="arcade"] .alert { background: #171d4a !important; color: #e9e7f5 !important; border: 2px solid var(--px-edge) !important; border-left-width: 6px !important; border-radius: 0; }
:root[data-theme="arcade"] .alert-info { border-left-color: #6cc4ff !important; }
:root[data-theme="arcade"] .alert-success { border-left-color: #3be07a !important; }
:root[data-theme="arcade"] .alert-warning { border-left-color: #a78bfa !important; }
:root[data-theme="arcade"] .alert-danger { border-left-color: #ff4d6d !important; }
:root[data-theme="arcade"] .alert a { color: #8fd4ff !important; }
:root[data-theme="arcade"] .alert code { background: #0b0f2a !important; color: #e9e7f5 !important; }
:root[data-theme="arcade"] .well { background: #171d4a !important; color: #e9e7f5 !important; border-color: var(--px-edge) !important; }


/* ---------- planet decorations on every page ---------- */

/* the brand in the menu bar gets a tiny ringed planet */
.navbar-brand::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 14px;
  margin-right: 9px;
  vertical-align: -1px;
  background: var(--px-p-saturn) center / contain no-repeat;
  image-rendering: pixelated;
}

/* the page colour comes from <html>; a see-through <body> lets the fixed background decorations (margin planets, arcade starfield) show behind the content */
html body { background: transparent !important; }

@media (prefers-reduced-motion: no-preference) {
  .px-top:hover { animation-duration: .6s; }
}


/* ---------- home page: live numbers and project cards ---------- */

.px-home { margin: 8px 4px 22px; }
.px-home-title { margin: 14px 0 14px; }
.px-pulse { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 20px; }
.px-tile {
  background: var(--surface);
  padding: 14px 16px;
  text-align: center;
  box-shadow: 0 -2px 0 0 var(--px-edge), 0 2px 0 0 var(--px-edge), -2px 0 0 0 var(--px-edge), 2px 0 0 0 var(--px-edge);
}
.px-tile-v { font: 600 2rem/1.15 var(--px-font); color: var(--accent-lo); letter-spacing: .01em; }
.px-tile-l { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.px-scroll, .table-responsive { max-width: 100%; contain: inline-size; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.px-join { margin: 8px 4px 6px; }
.px-join-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.px-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 14px 62px;
  background: var(--surface);
  box-shadow: 0 -2px 0 0 var(--px-edge), 0 2px 0 0 var(--px-edge), -2px 0 0 0 var(--px-edge), 2px 0 0 0 var(--px-edge);
}
.px-step-n {
  position: absolute; left: 14px; top: 14px; width: 34px; height: 34px; line-height: 34px; text-align: center;
  background: var(--accent); color: #fff; font: 600 1.2rem/34px var(--px-font);
  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, .35), 0 2px 0 0 rgba(0, 0, 0, .35), -2px 0 0 0 rgba(0, 0, 0, .35), 2px 0 0 0 rgba(0, 0, 0, .35);
}
.px-step-t { font: 600 1.15rem/1.2 var(--px-font); }
.px-step-d { font-size: 14px; line-height: 1.45; color: var(--text); opacity: .92; }
.px-step-a { margin-top: auto; padding-top: 4px; font-weight: 600; font-size: 14px; }

.px-ann { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 44px 9px 16px; color: #fff; font-size: 14.5px; line-height: 1.4; text-align: center; background: #6d4bb0; }
.px-ann-important { background: #c2185b; }
.px-ann-ok { background: #1f7a54; }
.px-ann-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: rgba(0, 0, 0, .22); color: #fff; font: 600 20px/28px var(--px-font); cursor: pointer; }
.px-ann-x:hover { background: rgba(0, 0, 0, .4); }

.px-phead { margin: 4px 0 18px; background: var(--surface); box-shadow: 0 -2px 0 0 var(--px-edge), 0 2px 0 0 var(--px-edge), -2px 0 0 0 var(--px-edge), 2px 0 0 0 var(--px-edge); }
.px-phead .px-card-scene { border-bottom: 2px solid var(--px-edge); }
.px-phead-stat { padding: 8px 14px; font-size: 13px; color: var(--text-muted); }

.px-search-btn { cursor: pointer; font-family: var(--px-font); letter-spacing: .04em; }
.px-find { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 2147483000; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; background: rgba(6, 8, 26, .72); }
.px-find-box { width: min(560px, 92vw); background: #121741; color: #e9e7f5; box-shadow: 0 -3px 0 0 #e8195a, 0 3px 0 0 #e8195a, -3px 0 0 0 #e8195a, 3px 0 0 0 #e8195a, 6px 8px 0 0 rgba(0, 0, 0, .4); }
.px-find-in { display: block; width: 100%; box-sizing: border-box; padding: 14px 16px; font-size: 17px; color: #fff; background: #0b0f2a; border: 0; border-bottom: 2px solid #34459a; outline: none; }
.px-find-list { list-style: none; margin: 0; padding: 6px 0; max-height: 52vh; overflow-y: auto; }
.px-find-it { display: flex; justify-content: space-between; gap: 12px; padding: 9px 16px; cursor: pointer; font-size: 15px; }
.px-find-it.on, .px-find-it:hover { background: #e8195a; color: #fff; }
.px-find-g { font-size: 12.5px; opacity: .7; white-space: nowrap; }
.px-find-none { padding: 12px 16px; opacity: .8; }

.px-active-t { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.px-active { margin: 0 0 22px; }
.px-active-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.px-active-i { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface); color: var(--text) !important; text-decoration: none !important;
  box-shadow: 0 -2px 0 0 var(--px-edge), 0 2px 0 0 var(--px-edge), -2px 0 0 0 var(--px-edge), 2px 0 0 0 var(--px-edge); }
.px-active-i:hover { box-shadow: 0 -2px 0 0 var(--accent), 0 2px 0 0 var(--accent), -2px 0 0 0 var(--accent), 2px 0 0 0 var(--accent); }
.px-active-n { width: 24px; height: 24px; line-height: 24px; text-align: center; flex: none; background: var(--accent); color: #fff; font: 600 14px/24px var(--px-font); }
.px-active-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.px-active-v { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* the level badge in the menu bar is a link now: keep the pill the same size as before (the menu's link padding would make it taller than the bar) */
.navbar-nav > li > a.bitboinc-level-badge { display: inline-block; padding: 5px 12px; margin: 10px 6px; line-height: 20px; border-radius: 999px; }
:root[data-theme="arcade"] .navbar-nav > li > a.bitboinc-level-badge, :root[data-theme="arcade"] .navbar-nav > li > a.bitboinc-level-badge:hover, :root[data-theme="arcade"] .navbar-nav > li > a.bitboinc-level-badge:focus { background-color: var(--accent) !important; color: #fff !important; border-radius: 0; }
:root[data-theme="arcade"] .navbar-nav > li > a.bitboinc-level-badge:hover { background-color: var(--accent-hi) !important; }
.navbar-nav > li > a.px-search-btn { padding-top: 15px; padding-bottom: 15px; line-height: 20px; }

/* BOINC's grid() nests a container-fluid inside the page container, which indents the account boxes by 15 px more than everything else */
.container-fluid > .container-fluid { padding-left: 0; padding-right: 0; width: 100%; }   /* width: it is a flex item with auto margins, it would shrink to its content (the account page boxes collapsed to ~100 px) */

/* ---------- statistics pages ---------- */

.px-bignum { font-family: var(--px-font); letter-spacing: .02em; }
.px-rank { display: inline-block; min-width: 24px; padding: 0 6px; line-height: 22px; text-align: center; font: 600 13px/22px var(--px-font); color: #fff; background: #3a4690; }
.px-rank1 { background: #e8195a; }
.px-rank2 { background: #2b7fc4; }
.px-rank3 { background: #7a52c9; }
.panel-body > svg[viewBox] { width: 100%; max-width: 760px !important; height: auto !important; display: block; }
:root[data-theme="arcade"] .progress { height: 14px; background: #0b0f2a; border-radius: 0; box-shadow: inset 0 0 0 2px var(--px-edge); }
:root[data-theme="arcade"] .progress-bar { border-radius: 0; background-color: var(--accent); background-image: repeating-linear-gradient(90deg, transparent 0 10px, rgba(8, 10, 34, .55) 10px 12px); box-shadow: none; }
:root[data-theme="arcade"] .table > tbody > tr:hover > td { background: rgba(232, 25, 90, .13); }

/* narrower page containers (some project pages) must not push the right-hand menu items onto a second line: tighter menu spacing on wide screens */
@media (min-width: 768px) {
  .navbar-nav > li > a { padding-left: 9px; padding-right: 9px; }
  .navbar-nav > li > a.bitboinc-level-badge { padding-left: 10px; padding-right: 10px; margin-left: 3px; margin-right: 3px; }
  .navbar-brand { padding-left: 8px; padding-right: 8px; }
}

.px-tbar { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.px-tfilter { flex: 0 1 280px; min-width: 0; padding: 6px 10px; font-size: 14px; color: var(--text); background: var(--surface); border: 2px solid var(--px-edge); border-radius: 0; outline: none; }
.px-tfilter:focus { border-color: var(--accent); }
.px-tcount { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.px-tmore { margin: 10px 0 4px; align-self: flex-start; display: inline-block; width: auto; }
th.px-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.px-sortable::after { content: " \2195"; opacity: .35; font-size: .85em; }
th.px-sortable[aria-sort="ascending"]::after { content: " \25B2"; opacity: 1; }
th.px-sortable[aria-sort="descending"]::after { content: " \25BC"; opacity: 1; }
th.px-sortable:hover { text-decoration: underline; }
th.px-sortable:focus-visible { outline: 2px dashed var(--accent-hi); outline-offset: -2px; }
.px-index { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.px-index-l { font-size: 13px; color: var(--text-muted); margin-right: 4px; }
.px-index-a { padding: 4px 10px; font-size: 13px; background: var(--surface); color: var(--text) !important; text-decoration: none !important; box-shadow: 0 -2px 0 0 var(--px-edge), 0 2px 0 0 var(--px-edge), -2px 0 0 0 var(--px-edge), 2px 0 0 0 var(--px-edge); }
.px-index-a:hover, .px-index-a:focus-visible { background: var(--accent); box-shadow: 0 -2px 0 0 var(--accent), 0 2px 0 0 var(--accent), -2px 0 0 0 var(--accent), 2px 0 0 0 var(--accent); color: #fff !important; }

/* the page container is a flex item of <body> (sticky footer) and Bootstrap gives it auto side margins, which makes it shrink to its content:
   pages with little content (forum, some project pages) came out narrower than the home page. Always use the full width. */
body > .container-fluid { width: 100%; }
/* project pages wrap their content in an inline "max-width:1100px; margin:0 auto" box, which leaves the content narrow and centred under a
   full-width title: let it use the whole page like everything else */
body > .container-fluid > div[style*="max-width"][style*="auto"] { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* form fields in the Arcade theme: dark field, light text (the forum editor was light text on a white box) */
:root[data-theme="arcade"] textarea, :root[data-theme="arcade"] select, :root[data-theme="arcade"] .form-control,
:root[data-theme="arcade"] input[type="text"], :root[data-theme="arcade"] input[type="search"], :root[data-theme="arcade"] input[type="email"],
:root[data-theme="arcade"] input[type="password"], :root[data-theme="arcade"] input[type="number"], :root[data-theme="arcade"] input[type="url"],
:root[data-theme="arcade"] input:not([type]) {
  background-color: #0b0f2a !important; color: #e9e7f5 !important; border: 2px solid var(--px-edge) !important; border-radius: 0;
}
:root[data-theme="arcade"] textarea:focus, :root[data-theme="arcade"] select:focus, :root[data-theme="arcade"] input:focus { border-color: var(--accent) !important; outline: none; }
:root[data-theme="arcade"] ::placeholder { color: #8a93c4; opacity: 1; }
:root[data-theme="arcade"] option { background: #0b0f2a; color: #e9e7f5; }

/* forum: larger post text, quotes as calm boxes instead of oversized text */
.px-forum-thread td > .panel > .panel-body { font-size: 15.5px; line-height: 1.6; }
.px-forum-thread td > .panel > .panel-body img { max-width: 100%; height: auto; }
:root[data-theme="arcade"] blockquote { font-size: inherit; margin: 10px 0 12px; padding: 10px 14px; background: #171d4a; border-left: 4px solid var(--accent-lo); color: #d9dcf0; }
:root[data-theme="arcade"] blockquote p:last-child { margin-bottom: 0; }

/* status cells (server status, task lists): tinted cells with light text instead of bright pastel blocks */
:root[data-theme="arcade"] .bg-success, :root[data-theme="arcade"] td.success, :root[data-theme="arcade"] tr.success > td { background-color: rgba(59, 224, 122, .16) !important; color: #8ff0b4 !important; }
:root[data-theme="arcade"] .bg-danger, :root[data-theme="arcade"] td.danger, :root[data-theme="arcade"] tr.danger > td { background-color: rgba(255, 77, 109, .18) !important; color: #ffb3c1 !important; }
:root[data-theme="arcade"] .bg-warning, :root[data-theme="arcade"] td.warning, :root[data-theme="arcade"] tr.warning > td { background-color: rgba(167, 139, 250, .18) !important; color: #d6c8ff !important; }
:root[data-theme="arcade"] .bg-info, :root[data-theme="arcade"] td.info, :root[data-theme="arcade"] tr.info > td { background-color: rgba(108, 196, 255, .16) !important; color: #b9e3ff !important; }

.px-me { margin: 0 0 22px; background: var(--surface); box-shadow: 0 -2px 0 0 var(--px-edge), 0 2px 0 0 var(--px-edge), -2px 0 0 0 var(--px-edge), 2px 0 0 0 var(--px-edge); }
.px-me-top { display: flex; align-items: center; gap: 14px; padding: 14px 16px 6px; }
.px-me-badge { flex: none; image-rendering: pixelated; }
.px-me-head { flex: 1; min-width: 0; }
.px-me-hi { font: 600 1.35rem/1.2 var(--px-font); }
.px-me-lv { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.px-me-go { flex: none; font-weight: 600; font-size: 14px; }
.px-me-body { padding: 4px 16px 16px; }
.px-me-bar { margin-top: 6px; }
.px-me-note { margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.px-me-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.px-me-stat { padding: 8px 10px; background: var(--bg-alt); }
.px-me-stat b { display: block; font: 600 1.15rem/1.2 var(--px-font); color: var(--accent-lo); }
.px-me-stat span { font-size: 12.5px; color: var(--text-muted); }
.px-skip { position: absolute; left: -9999px; top: 8px; z-index: 2147483001; padding: 8px 14px; background: var(--accent); color: #fff !important; font-weight: 600; }
.px-skip:focus { left: 12px; }
:root[data-theme="arcade"] a:focus-visible, :root[data-theme="arcade"] button:focus-visible, :root[data-theme="arcade"] [role="button"]:focus-visible { outline: 3px dashed #ff6b9a; outline-offset: 3px; }

.px-goal { margin: -4px 0 22px; }
.px-goal-t { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.px-goal-bar { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.px-goal-s { display: block; height: 12px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--px-edge); }
.px-goal-s.on { background: var(--accent); box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, .28), inset 0 0 0 2px var(--accent-lo); }

.px-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.px-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text) !important;
  text-decoration: none !important;
  box-shadow: 0 -2px 0 0 var(--px-edge), 0 2px 0 0 var(--px-edge), -2px 0 0 0 var(--px-edge), 2px 0 0 0 var(--px-edge);
}
.px-card:hover, .px-card:focus-visible {
  box-shadow: 0 -2px 0 0 var(--accent), 0 2px 0 0 var(--accent), -2px 0 0 0 var(--accent), 2px 0 0 0 var(--accent), 4px 6px 0 0 rgba(0, 0, 0, .22);
  transform: translate(-1px, -2px);
}
.px-card:focus-visible { outline: 3px dashed var(--accent-hi); outline-offset: 5px; }
.px-card-scene { position: relative; display: block; line-height: 0; overflow: hidden; background: #0b0f2a; border-bottom: 2px solid var(--px-edge); }
.px-card-scene canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.px-card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.px-card-title { font: 600 1.35rem/1.2 var(--px-font); }
.px-card-sub { font-size: 14px; line-height: 1.45; color: var(--text); opacity: .92; }
.px-card-stat { font-size: 12.5px; color: var(--text-muted); min-height: 1.4em; }
.px-card-go { margin-top: auto; padding-top: 4px; font-weight: 600; font-size: 14px; color: var(--accent-lo); }
.px-card:hover .px-card-go { text-decoration: underline; text-underline-offset: 3px; }

.px-read { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: var(--accent); z-index: 1040; opacity: 0; pointer-events: none; transition: opacity .2s; }
.px-copy {
  margin-left: 8px;
  padding: 2px 10px;
  border: 0;
  background: var(--accent);
  color: #fff;
  font: 600 12.5px/1.6 inherit;
  cursor: pointer;
  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, .35), 0 2px 0 0 rgba(0, 0, 0, .35), -2px 0 0 0 rgba(0, 0, 0, .35), 2px 0 0 0 rgba(0, 0, 0, .35);
}
.px-copy:active { transform: translateY(2px); }

/* ---------- motion off + phones ---------- */

@media (prefers-reduced-motion: reduce) {
  .px-top.go, .px-top:hover, .px-confetti, .px-toast { animation: none !important; }
  .px-card:hover { transform: none; }
  .px-shoot { display: none; }
}
/* pixel font only in the Arcade theme: everywhere else use a normal readable font */
:root:not([data-theme="arcade"]) h1,
:root:not([data-theme="arcade"]) h2,
:root:not([data-theme="arcade"]) h3,
:root:not([data-theme="arcade"]) h4,
:root:not([data-theme="arcade"]) .h1,
:root:not([data-theme="arcade"]) .h2,
:root:not([data-theme="arcade"]) .h3,
:root:not([data-theme="arcade"]) .h4,
:root:not([data-theme="arcade"]) .panel-heading,
:root:not([data-theme="arcade"]) .panel-title,
:root:not([data-theme="arcade"]) .navbar-brand,
:root:not([data-theme="arcade"]) .bitboinc-banner-title,
:root:not([data-theme="arcade"]) legend,
:root:not([data-theme="arcade"]) .px-toast,
:root:not([data-theme="arcade"]) .px-tile-v,
:root:not([data-theme="arcade"]) .px-step-n,
:root:not([data-theme="arcade"]) .px-step-t,
:root:not([data-theme="arcade"]) .px-ann-x,
:root:not([data-theme="arcade"]) .px-search-btn,
:root:not([data-theme="arcade"]) .px-active-n,
:root:not([data-theme="arcade"]) .px-bignum,
:root:not([data-theme="arcade"]) .px-rank,
:root:not([data-theme="arcade"]) .px-me-hi,
:root:not([data-theme="arcade"]) .px-me-stat b,
:root:not([data-theme="arcade"]) .px-card-title,
:root:not([data-theme="arcade"]) .px-copy {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif !important;
}

@media (max-width: 600px) {
  .btn { white-space: normal; max-width: 100%; }
  code, kbd, samp, a { overflow-wrap: anywhere; }   /* long hashes and URLs wrap instead of widening the page */
  div[style*="auto-fit"] { grid-template-columns: minmax(0, 1fr) !important; }   /* inline auto-fit grids on project pages count their minimum width as 300-330 px and push the page wider than the phone */
  .px-pulse { grid-template-columns: 1fr 1fr; gap: 10px; }
  .px-tile { padding: 10px 8px; }
  .px-tile-l { font-size: 12px; }
  .px-cards { grid-template-columns: 1fr; }
  .px-tile-v { font-size: 1.5rem; }
  .px-top { width: 28px; height: 45px; right: 10px; bottom: 10px; }
  .panel, .well, .alert { margin-left: 3px; margin-right: 3px; }
  h1, .h1 { font-size: 1.7rem; }
  h2, .h2 { font-size: 1.45rem; }
}