/* Element resets and base typography. */
  *{box-sizing:border-box}
  body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
  h1,h2,h3,h4{font-family:var(--display);font-weight:800;margin:0;line-height:1.45;text-wrap:balance}
  p{margin:0}
  img{display:block}
  img,.scene{image-rendering:pixelated;image-rendering:crisp-edges}
  button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
  :focus-visible{outline:var(--edge) solid var(--sky);outline-offset:2px;border-radius:0}
  .mono{font-family:var(--mono);font-weight:700}

  /* Every icon in the chrome is an authored 8-bit PNG from tools/icons.py.
     The mask variants carry their shape in alpha and take currentColor, so one
     file serves light and dark mode. */
  .ico{display:inline-block;background:currentColor;vertical-align:middle;
    -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
  .ico.camera{--i:url(../assets/px/ui/camera.png);width:22px;height:16px}
  .ico.close {--i:url(../assets/px/ui/close.png); width:14px;height:14px}
  .ico.check {--i:url(../assets/px/ui/check.png); width:16px;height:12px}
  .ico.trash {--i:url(../assets/px/ui/trash.png); width:14px;height:14px}
  .ico.star  {--i:url(../assets/px/ui/star.png);  width:14px;height:14px}
  .ico.plus  {--i:url(../assets/px/ui/plus.png);  width:14px;height:14px}
  .ico.image {--i:url(../assets/px/ui/image.png); width:20px;height:16px}
  .ico.heart {--i:url(../assets/px/ui/heart-line.png);width:18px;height:16px}
  /* Three icons keep their own colours instead of taking currentColor, so they
     are background-images rather than masks. .ico sets a mask, so each has to
     clear it or the mask wins and they render as a solid block. */
  .ico.heart.on, .ico.coin, .ico.gem{background:none;-webkit-mask:none;mask:none;
    background-size:contain;background-repeat:no-repeat;background-position:center}
  .ico.heart.on{background-image:url(../assets/px/ui/heart.png)}
  .ico.coin{background-image:url(../assets/px/ui/coin.png);width:16px;height:16px}
  .ico.gem {background-image:url(../assets/art/ui/credit.png); width:18px;height:18px}
